/* ==========================================================================
   LVN · Sistema de diseño
   Dirección: "El documento técnico como sistema gráfico".
   La mensura, las curvas de nivel y las cotas son la identidad.
   ========================================================================== */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Color — cinco roles, ni uno más.
     Cada rol tiene su variante para el fondo contrario; no son colores
     nuevos, son el mismo color medido contra el otro fondo. */
  --piedra:#EFEBE3;        /* fondo papel                                   */
  --piedra-2:#E5E0D5;      /* fondo papel, segundo nivel                    */
  --tinta:#191A17;         /* texto y secciones oscuras                     */
  --tinta-2:#252722;
  --corten:#8C4A2B;        /* acento único — el color del pórtico           */
  --corten-cl:#C87A4A;     /* corten legible sobre tinta                    */
  --arroyo:#5B7C82;        /* el agua · estado disponible                   */
  --arroyo-tx:#45646A;     /* arroyo legible sobre piedra                   */
  --arido:#A8A294;         /* líneas técnicas, cotas · estado vendido       */
  --arido-tx:#635E51;   /* árido legible sobre piedra — 5,4:1 */

  /* Aplicados */
  --fondo:var(--piedra);
  --texto:var(--tinta);
  --suave:var(--arido-tx);
  --filete:color-mix(in srgb, var(--tinta) 15%, transparent);
  --filete-fino:color-mix(in srgb, var(--tinta) 8%, transparent);

  /* Estados de lote */
  --e-disponible:var(--arroyo);
  --e-reservado:var(--corten);
  --e-vendido:var(--arido);

  /* Tipografía */
  --display:'Bodoni Moda','Bodoni 72',Didot,'Times New Roman',serif;
  --texto-f:'Archivo','Helvetica Neue',Arial,sans-serif;

  --t-micro:clamp(.66rem,.63rem + .12vw,.72rem);
  --t-pie:clamp(.78rem,.75rem + .14vw,.84rem);
  --t-base:clamp(1rem,.97rem + .16vw,1.06rem);
  --t-guia:clamp(1.13rem,1.04rem + .45vw,1.42rem);
  --t-h3:clamp(1.3rem,1.14rem + .72vw,1.75rem);
  --t-h2:clamp(2rem,1.42rem + 2.5vw,3.7rem);
  --t-h1:clamp(2.1rem,1.3rem + 3.6vw,5.2rem);
  --t-cifra:clamp(2.3rem,1.5rem + 3.4vw,4.2rem);

  /* Retícula */
  --margen:clamp(1.15rem,4.5vw,4.5rem);
  --ancho:1280px;
  --medida:64ch;

  /* Movimiento */
  --sal:cubic-bezier(.22,.61,.36,1);
  --suave-e:cubic-bezier(.33,1,.68,1);
  --rapido:170ms; --medio:400ms;

  --z-plano:10; --z-menu:70; --z-nav:80; --z-modal:95;
}

/* ── 2 · Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--texto-f); font-size:var(--t-base); line-height:1.62;
  font-weight:400; font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,iframe{display:block; max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,dd{margin:0}
ul,ol,dl{margin:0; padding:0; list-style:none}
::selection{background:var(--corten); color:#fff}

:focus-visible{outline:2px solid var(--corten); outline-offset:3px}
.oscuro :focus-visible{outline-color:var(--corten-cl)}

.saltar{
  position:absolute; left:var(--margen); top:-100px; z-index:999;
  background:var(--tinta); color:var(--piedra); padding:.8rem 1.3rem;
  transition:top var(--rapido) var(--sal);
}
.saltar:focus{top:.75rem}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 3 · Tipografía ─────────────────────────────────────────────────────── */
.display{
  font-family:var(--display); font-weight:400; line-height:.94;
  letter-spacing:-.015em; font-variation-settings:'opsz' 88;
  text-wrap:balance;
}
.h1{font-size:var(--t-h1); text-transform:uppercase; letter-spacing:-.005em}
/* Los cortes de línea del titular son decisión de escritorio: en teléfono
   estorban, así que ahí el texto fluye solo. */
br.opt{display:none}
@media (min-width:760px){br.opt{display:inline}}
.h2{font-size:var(--t-h2)}
.h3{font-family:var(--display); font-size:var(--t-h3); font-weight:400;
    line-height:1.14; letter-spacing:-.01em}
.guia{font-size:var(--t-guia); line-height:1.48; font-weight:300; letter-spacing:-.004em}
.medida{max-width:var(--medida)}
.suave{color:var(--suave)}
.oscuro .suave{color:var(--arido)}
.cifras{font-variant-numeric:tabular-nums}

/* Micro-rótulo: versalitas expandidas. El recurso de UI de todo el sitio. */
.rotulo{
  font-family:var(--texto-f); font-variation-settings:'wdth' 118;
  font-size:var(--t-micro); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--corten); display:inline-flex; align-items:center; gap:.7rem;
}
.oscuro .rotulo{color:var(--corten-cl)}
.rotulo::before{content:''; width:1.75rem; height:1px; background:currentColor; flex:none}
.rotulo--solo::before{display:none}

/* Cota: el filete acotado con topes, usado como separador de sección */
.cota{
  display:block; height:9px; border:0; margin:0;
  background:
    linear-gradient(var(--arido),var(--arido)) left  center/1px 9px no-repeat,
    linear-gradient(var(--arido),var(--arido)) right center/1px 9px no-repeat,
    linear-gradient(var(--arido),var(--arido)) center center/100% 1px no-repeat;
  opacity:.75;
}

/* ── 4 · Retícula ───────────────────────────────────────────────────────── */
.marco{width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--margen)}
.bloque{padding-block:clamp(3.5rem,9vw,7.5rem); position:relative}
.bloque--corto{padding-block:clamp(2.5rem,6vw,4.5rem)}
.oscuro{
  background:var(--tinta); color:var(--piedra);
  --suave:var(--arido);   /* el gris oscuro no llega a 4.5:1 sobre tinta */
  --filete:color-mix(in srgb, var(--piedra) 17%, transparent);
  --filete-fino:color-mix(in srgb, var(--piedra) 9%, transparent);
}
.papel-2{background:var(--piedra-2)}

.duo{display:grid; gap:clamp(1.75rem,4vw,3rem)}
@media (min-width:900px){
  .duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,6vw,6rem); align-items:start}
  .duo--inv{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .duo--medio{align-items:center}
}
.encabezado{margin-bottom:clamp(2rem,5vw,3.5rem)}
.encabezado .display{margin-top:1.1rem}

/* Fondo de curvas de nivel */
.curvas{position:relative; isolation:isolate}
.curvas::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('../img/curvas-claras.svg') center/cover no-repeat;
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent);
}
.oscuro.curvas::before{background-image:url('../img/curvas-oscuras.svg'); opacity:.42}

/* ── 5 · Botones y enlaces ──────────────────────────────────────────────── */
.btn{
  --bg:var(--tinta); --fg:var(--piedra);
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  min-height:52px; padding:0 1.6rem;
  background:var(--bg); color:var(--fg);
  font-variation-settings:'wdth' 112; font-size:.8rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  position:relative; overflow:hidden; touch-action:manipulation;
  transition:color var(--medio) var(--sal), background var(--medio) var(--sal);
}
.btn > *{position:relative; z-index:1}
.btn::after{
  content:''; position:absolute; inset:0; background:var(--corten);
  transform:translateY(101%); transition:transform var(--medio) var(--suave-e);
}
.btn:hover{color:#fff}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(1px)}
.btn--linea{--bg:transparent; --fg:var(--tinta); box-shadow:inset 0 0 0 1px var(--filete)}
.oscuro .btn{--bg:var(--piedra); --fg:var(--tinta)}
.oscuro .btn--linea{--bg:transparent; --fg:var(--piedra); box-shadow:inset 0 0 0 1px var(--filete)}
.btn--ancho{width:100%}
.btn .i{width:15px; height:15px; flex:none}

.enlace{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  font-variation-settings:'wdth' 112; font-size:.8rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; position:relative;
}
.enlace::before{
  content:''; position:absolute; left:0; right:0; bottom:.5rem; height:1px;
  background:currentColor; transform-origin:right;
  transition:transform var(--medio) var(--suave-e);
}
.enlace:hover::before{transform:scaleX(0); transform-origin:left}
.enlace .i{width:14px; height:14px; transition:transform var(--medio) var(--sal)}
.enlace:hover .i{transform:translateX(4px)}

/* ── 6 · Cabecera ───────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  padding-top:env(safe-area-inset-top);
  transition:transform 480ms var(--sal), background 350ms var(--sal);
}
.nav.solida{background:color-mix(in srgb,var(--piedra) 90%,transparent); box-shadow:0 1px 0 var(--filete-fino)}
@supports (backdrop-filter:blur(1px)){.nav.solida{backdrop-filter:saturate(140%) blur(12px)}}
.nav.oculta{transform:translate3d(0,-100%,0)}
.nav__in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:74px; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--margen);
}
.marca{display:inline-flex; align-items:center; gap:.8rem; min-height:48px}
.marca svg{width:62px; height:auto}
.marca svg [stroke]{stroke:currentColor}
.marca__barrio{
  font-variation-settings:'wdth' 116; font-size:var(--t-micro); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--suave);
  padding-left:.8rem; border-left:1px solid var(--filete);
}
@media (max-width:600px){.marca__barrio{display:none}}

.nav__links{display:none}
@media (min-width:1040px){
  .nav__links{display:flex; align-items:center; gap:clamp(1.1rem,2.2vw,2.1rem)}
  .nav__links a{
    font-variation-settings:'wdth' 110; font-size:var(--t-micro); font-weight:500;
    letter-spacing:.15em; text-transform:uppercase;
    min-height:44px; display:inline-flex; align-items:center; position:relative;
  }
  .nav__links a::after{
    content:''; position:absolute; left:0; bottom:11px; width:100%; height:1px;
    background:var(--corten); transform:scaleX(0); transform-origin:left;
    transition:transform var(--medio) var(--suave-e);
  }
  .nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
  .nav__links a[aria-current]{color:var(--corten)}
}
.nav__cta{display:none}
@media (min-width:1040px){.nav__cta{display:inline-flex; min-height:46px}}

.hamb{width:48px; height:48px; display:inline-flex; flex-direction:column;
      align-items:center; justify-content:center; gap:6px; margin-right:-10px}
@media (min-width:1040px){.hamb{display:none}}
.hamb span{width:22px; height:1.5px; background:currentColor;
           transition:transform 330ms var(--sal), opacity 180ms}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-3.75px) rotate(-45deg)}

.menu{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:var(--tinta); color:var(--piedra);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(94px + env(safe-area-inset-top)) var(--margen) calc(1.5rem + env(safe-area-inset-bottom));
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path 640ms var(--suave-e);
}
.menu.abierto{clip-path:inset(0 0 0 0); pointer-events:auto}
/* display:flex pisaba el atributo hidden y dejaba los enlaces del menú
   dentro del orden de tabulación en escritorio, invisibles. */
.menu[hidden]{display:none}
.menu a{
  font-family:var(--display); font-size:clamp(1.9rem,9vw,3rem); line-height:1.08;
  padding-block:.26em; display:block; opacity:0; transform:translateY(26px);
  transition:opacity 520ms var(--sal), transform 520ms var(--sal);
  transition-delay:calc(var(--i,0) * 55ms + 140ms);
}
.menu.abierto a{opacity:1; transform:none}
.menu__pie{margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.5rem 2rem}
.menu__pie a{font-family:var(--texto-f); font-size:.95rem; opacity:1; transform:none;
             transition:none; min-height:44px; display:inline-flex; align-items:center}
body.menu-abierto .nav{color:var(--piedra)}
body.menu-abierto .nav.solida{background:transparent; box-shadow:none; backdrop-filter:none}
body.menu-abierto .marca__barrio{color:var(--arido); border-color:var(--filete)}

/* ── 7 · Escena (contenedor de foto) ────────────────────────────────────── */
/* Sin foto muestra la trama topográfica. Al definir --foto se pinta encima. */
.escena{
  position:relative; overflow:hidden; isolation:isolate; display:block;
  background:var(--piedra-2) url('../img/curvas-claras.svg') center/cover no-repeat;
}
.escena--oscura{background-color:var(--tinta-2); background-image:url('../img/curvas-oscuras.svg')}
.escena::before{
  content:''; position:absolute; inset:0; z-index:2;
  background-image:var(--foto,none); background-size:cover; background-position:var(--foco,center);
}
.escena img{position:absolute; inset:0; z-index:2; width:100%; height:100%;
            object-fit:cover; object-position:var(--foco,center)}
.escena__pie{
  position:absolute; z-index:4; inset:auto 0 0 0; padding:clamp(.9rem,2.5vw,1.6rem);
  font-variation-settings:'wdth' 112; font-size:var(--t-micro); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--piedra);
  /* El texto se apoya entre el 20 % y el 60 % de esta caja: ahí el velo tiene
     que estar ya casi opaco, o sobre escena clara no llega a 4,5:1. */
  background:linear-gradient(to top,rgba(15,17,14,.93) 0%,rgba(15,17,14,.88) 62%,rgba(15,17,14,.42) 84%,transparent 100%);
  text-shadow:0 1px 2px rgba(15,17,14,.55);
}
/* ── Grado unificador de fotografía ──────────────────────────────────────
   Cinco fotos de cinco fotógrafos distintos se leen como cinco fotos.
   Este grado las baja de color, les sube apenas el contraste y les apoya un
   velo cálido de piedra: pasan a leerse como una sola producción.
   Se aplica solo donde hay foto, nunca sobre la lámina topográfica.

   Para desactivarlo cuando llegue el material propio: --grado:0 en :root.
   Para bajarlo a la mitad: --grado:.5                                      */
:root{--grado:1}
.escena:has(img)::before,.escena:has(img) img,
.escena[style*="--foto"]::before{
  filter:saturate(calc(1 - .32 * var(--grado)))
         contrast(calc(1 + .07 * var(--grado)))
         brightness(calc(1 + .01 * var(--grado)));
}
.escena:has(img)::after,.escena[style*="--foto"]::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:var(--grado);
  background:
    linear-gradient(165deg, rgba(239,235,227,.13) 0%, rgba(239,235,227,0) 48%),
    linear-gradient(0deg,  rgba(140,74,43,.065), rgba(140,74,43,.065));
}

/* Etiqueta de imagen provisoria. Va dentro del pie de foto.
   Cuando la foto sea del predio, se borra este <span> y listo. */
.escena__pie .ref,.visor__barra .ref{
  display:inline-block; margin-left:.7rem; padding:.14em .55em;
  border:1px solid currentColor; opacity:.72;
  font-size:.92em; letter-spacing:.12em; white-space:nowrap;
}
@media (max-width:520px){
  .escena__pie .ref{display:block; margin:.5rem 0 0; width:max-content}
}

.r-43{aspect-ratio:4/3} .r-32{aspect-ratio:3/2} .r-11{aspect-ratio:1/1}
.r-169{aspect-ratio:16/9} .r-45{aspect-ratio:4/5}

/* ── 8 · Barra de datos duros ───────────────────────────────────────────── */
.datos{display:grid; grid-template-columns:repeat(2,1fr); gap:0}
@media (min-width:860px){.datos{grid-template-columns:repeat(4,1fr)}}
.datos li{padding:clamp(1.2rem,3vw,1.9rem) clamp(.9rem,2vw,1.6rem);
          border-top:1px solid var(--filete); border-left:1px solid var(--filete)}
.datos li:nth-child(2n+1){border-left:0}
@media (min-width:860px){
  .datos li:nth-child(2n+1){border-left:1px solid var(--filete)}
  .datos li:first-child{border-left:0}
}
.datos b{display:block; font-family:var(--display); font-size:var(--t-h3);
         font-weight:400; line-height:1.05; letter-spacing:-.01em}
.datos span{display:block; margin-top:.5rem; font-size:var(--t-pie); color:var(--suave)}

/* ── 9 · Diferenciales ──────────────────────────────────────────────────── */
.difs{display:grid; gap:1px; background:var(--filete);
      border-block:1px solid var(--filete)}
@media (min-width:680px){.difs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.difs{grid-template-columns:repeat(3,1fr)}}
.dif{background:var(--fondo); padding:clamp(1.6rem,3.5vw,2.4rem) clamp(1.2rem,2.5vw,1.9rem);
     display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; align-content:start}
.dif__n{font-family:var(--display); font-size:.9rem; color:var(--corten); grid-row:1/3;
        padding-top:.35rem; font-variant-numeric:tabular-nums}
.dif h3{font-family:var(--display); font-size:1.22rem; font-weight:400; line-height:1.15}
.dif p{font-size:.95rem; color:var(--suave); max-width:36ch}

/* ── 10 · Plano ─────────────────────────────────────────────────────────── */
.plano{display:grid; gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:1060px){
  .plano{grid-template-columns:minmax(0,1fr) 350px; gap:clamp(2rem,4vw,3.5rem); align-items:start}
}
.plano__lienzo{position:relative; border:1px solid var(--filete); background:var(--piedra-2)}
.plano__svg{width:100%; height:auto; display:block; touch-action:manipulation}

.lote{cursor:pointer; transition:opacity var(--medio) var(--sal)}
.lote__forma{fill:#E7E2D6; stroke:#B4AE9E; stroke-width:2;
             transition:fill var(--medio) var(--sal), stroke var(--medio) var(--sal)}
.lote[data-estado="reservado"] .lote__forma{fill:#E8DCCB}
.lote[data-estado="vendido"]   .lote__forma{fill:#DAD5C8}
.lote__n{font-family:var(--display); font-size:44px; fill:var(--tinta);
         text-anchor:middle; dominant-baseline:central; pointer-events:none}
.lote__m2{font-family:var(--texto-f); font-size:19px; letter-spacing:.1em;
          fill:var(--arido-tx); text-anchor:middle; dominant-baseline:central; pointer-events:none}
.lote:hover .lote__forma{fill:#F7F4EC; stroke:var(--corten)}
.lote.elegido .lote__forma{fill:#FFFDF7; stroke:var(--corten); stroke-width:4}
.lote.elegido .lote__n{fill:var(--corten)}
.lote[data-estado="vendido"]{opacity:.55}
.lote.apagado{opacity:.2; pointer-events:none}
.lote:focus{outline:none}
.lote:focus-visible{outline:2px solid var(--corten); outline-offset:4px}
.plano__txt{font-family:var(--texto-f); font-variation-settings:'wdth' 115;
            font-size:17px; letter-spacing:.18em; fill:var(--arido-tx)}

.filtros{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.2rem}
.ficha-chip{
  min-height:44px; padding:0 1rem; box-shadow:inset 0 0 0 1px var(--filete);
  font-variation-settings:'wdth' 108; font-size:var(--t-micro); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:background var(--rapido), color var(--rapido), box-shadow var(--rapido);
}
.ficha-chip:hover{background:var(--piedra-2)}
.ficha-chip[aria-pressed="true"]{background:var(--tinta); color:var(--piedra); box-shadow:none}
.punto{width:8px; height:8px; flex:none; border-radius:50%}
.punto--d{background:var(--e-disponible)} .punto--r{background:var(--e-reservado)}
.punto--v{background:var(--e-vendido)}

/* Mejora progresiva: sin JS el panel no sirve, así que manda la lista.
   Con JS, escritorio = plano + panel; teléfono = lista + visor a pantalla completa. */
.plano__col{min-width:0}
.sin-js .panel,.sin-js .conmutador,.sin-js .filtros{display:none}
.lista__it[hidden]{display:none}
@media (min-width:1060px){ .js .lista{display:none} }
@media (max-width:1059px){ .js .plano__lienzo{display:none} }

/* Panel de detalle (escritorio) */
/* Lleva también la clase .oscuro en el marcado: así hereda los tokens de
   superficie oscura (rótulo, botón secundario, texto suave, foco). */
.panel{padding:clamp(1.4rem,2.5vw,1.9rem)}
@media (min-width:1060px){.panel{position:sticky; top:100px}}
.panel__cab{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.panel__n{font-family:var(--display); font-size:clamp(2.6rem,6vw,3.3rem); line-height:.88; font-weight:400}
.etiqueta{
  font-variation-settings:'wdth' 112; font-size:var(--t-micro); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; padding:.4rem .7rem; white-space:nowrap;
}
.etiqueta--d{background:#2C4A4F; color:#BFDDE2}
.etiqueta--r{background:#4E2E1C; color:#F0C29C}
.etiqueta--v{background:#3A3931; color:#CFCABC}
.specs{margin-top:1.3rem; border-top:1px solid var(--filete)}
.specs > div{display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0;
             border-bottom:1px solid var(--filete-fino); font-size:.92rem}
.specs dt{color:var(--arido)}
.specs dd{font-weight:500; text-align:right; font-variant-numeric:tabular-nums}
.panel__nota{margin-top:1.2rem; font-size:.88rem; color:var(--arido)}
.panel .btn{margin-top:1.2rem}
.plano__nota{margin-top:.9rem; font-size:var(--t-pie); color:var(--suave)}

/* Lista de lotes — es el contenido real; en móvil es la interfaz principal */
.lista{display:grid; gap:0; border-top:1px solid var(--filete)}
.lista__it{border-bottom:1px solid var(--filete)}
.lista__a{
  display:grid; grid-template-columns:64px 1fr auto; gap:1rem; align-items:center;
  padding:1rem .25rem; min-height:76px;
  transition:background var(--rapido) var(--sal);
}
.lista__a:hover{background:var(--piedra-2)}
.lista__mini{width:64px; height:52px; border:1px solid var(--filete); background:var(--piedra-2)}
.lista__mini svg{width:100%; height:100%}
.lista__nom{font-family:var(--display); font-size:1.3rem; line-height:1.1}
.lista__meta{font-size:var(--t-pie); color:var(--suave); margin-top:.15rem}
.lista__meta .cifras{color:var(--texto)}
.lista__est{
  font-variation-settings:'wdth' 110; font-size:var(--t-micro); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.45rem;
}
/* En teléfono el estado baja a su propia línea: el texto necesita el ancho. */
@media (max-width:560px){
  .lista__a{grid-template-columns:56px 1fr; row-gap:.4rem; align-items:start}
  .lista__mini{width:56px; height:46px}
  .lista__est{grid-column:2; justify-self:start}
}
.lista__est[data-estado="disponible"]{color:var(--arroyo-tx)}
.lista__est[data-estado="reservado"]{color:var(--corten)}
.lista__est[data-estado="vendido"]{color:var(--arido-tx)}

/* Conmutador plano / lista */
.conmutador{display:flex; gap:0; margin-bottom:1.2rem; border:1px solid var(--filete)}
.conmutador button{
  flex:1; min-height:48px; font-variation-settings:'wdth' 110;
  font-size:var(--t-micro); font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  transition:background var(--rapido), color var(--rapido);
}
.conmutador button[aria-pressed="true"]{background:var(--tinta); color:var(--piedra)}
@media (min-width:1060px){.conmutador{display:none}}

/* Plano a pantalla completa (móvil) */
.visor{
  position:fixed; inset:0; z-index:var(--z-modal); background:var(--piedra);
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  opacity:0; pointer-events:none; transition:opacity 280ms var(--sal);
}
.visor.abierto{opacity:1; pointer-events:auto}
.visor__barra{display:flex; align-items:center; justify-content:space-between; gap:1rem;
              padding:.6rem var(--margen); border-bottom:1px solid var(--filete)}
.visor__lienzo{flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:1rem}
.visor__lienzo svg{width:190%; max-width:none; height:auto; margin-inline:auto}
.visor__pie{padding:.75rem var(--margen); border-top:1px solid var(--filete);
            font-size:var(--t-pie); color:var(--suave)}
.icono-btn{width:48px; height:48px; display:grid; place-items:center}
.icono-btn svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.6; fill:none;
               stroke-linecap:round; stroke-linejoin:round}

/* ── 11 · Galería ───────────────────────────────────────────────────────── */
.galeria{display:grid; gap:clamp(.5rem,1.4vw,1rem)}
@media (min-width:780px){
  .galeria{grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(140px,13.5vw,205px)}
  .galeria li:nth-child(1){grid-column:1/4; grid-row:1/3}
  .galeria li:nth-child(2){grid-column:4/7; grid-row:1/2}
  .galeria li:nth-child(3){grid-column:4/7; grid-row:2/3}
  .galeria li:nth-child(4){grid-column:1/3; grid-row:3/5}
  .galeria li:nth-child(5){grid-column:3/7; grid-row:3/5}
  .galeria li,.galeria li > *,.galeria .escena{height:100%}
  .galeria .escena{aspect-ratio:auto}
}
.galeria button{display:block; width:100%; position:relative; overflow:hidden}
.galeria .escena{transition:transform 900ms var(--suave-e)}
.galeria button:hover .escena{transform:scale(1.03)}

/* ── 12 · Avance de obra ────────────────────────────────────────────────── */
.obra{counter-reset:o}
.etapa{display:grid; gap:.4rem 1.5rem; padding-block:clamp(1.3rem,3vw,2rem);
       border-top:1px solid var(--filete); align-items:baseline}
@media (min-width:820px){.etapa{grid-template-columns:9rem minmax(0,20ch) minmax(0,1fr) auto}}
.etapa:last-child{border-bottom:1px solid var(--filete)}
.etapa__f{font-variation-settings:'wdth' 110; font-size:var(--t-micro); font-weight:500;
          letter-spacing:.14em; text-transform:uppercase; color:var(--suave)}
.etapa h3{font-family:var(--display); font-size:1.3rem; font-weight:400; line-height:1.14}
.etapa p{font-size:.95rem; color:var(--suave); max-width:48ch}
.estado-obra{
  font-variation-settings:'wdth' 110; font-size:var(--t-micro); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem;
}
.estado-obra::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor}
.estado-obra[data-e="hecho"]{color:var(--arroyo-tx)}
.estado-obra[data-e="curso"]{color:var(--corten)}
.estado-obra[data-e="proximo"]{color:var(--arido-tx)}
.oscuro .estado-obra[data-e="hecho"]{color:#9FC6CC}
.oscuro .estado-obra[data-e="curso"]{color:var(--corten-cl)}
.oscuro .estado-obra[data-e="proximo"]{color:var(--arido)}
.actualizado{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.5rem;
  font-size:var(--t-pie); color:var(--suave);
}

/* ── 13 · Ubicación ─────────────────────────────────────────────────────── */
.distancias{margin-top:1.75rem; border-top:1px solid var(--filete)}
.distancias li{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
               padding:.85rem 0; border-bottom:1px solid var(--filete)}
.distancias b{font-family:var(--display); font-weight:400; font-size:1.1rem;
              letter-spacing:.02em; white-space:nowrap; color:var(--corten)}
.oscuro .distancias b{color:var(--corten-cl)}

/* ── 14 · Preguntas frecuentes ──────────────────────────────────────────── */
.faq{border-top:1px solid var(--filete)}
.faq details{border-bottom:1px solid var(--filete)}
.faq summary{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1.15rem 0; min-height:60px; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:1.16rem; line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+'; font-family:var(--texto-f); font-size:1.3rem; color:var(--corten);
  flex:none; line-height:1; transition:transform var(--medio) var(--sal);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--corten)}
.faq .resp{padding-bottom:1.3rem; max-width:62ch; color:var(--suave); font-size:.97rem}
.faq .resp p + p{margin-top:.7rem}

/* ── 15 · Formulario ────────────────────────────────────────────────────── */
.form{display:grid; gap:1.3rem}
@media (min-width:700px){.form{grid-template-columns:repeat(2,1fr)} .form .ancho{grid-column:1/-1}}
.campo{display:grid; gap:.45rem}
.campo label{
  font-variation-settings:'wdth' 112; font-size:var(--t-micro); font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--arido);
}
.campo .req{color:var(--corten-cl)}
.campo input,.campo select,.campo textarea{
  width:100%; min-height:52px; padding:.8rem 1rem; font-size:16px;
  background:rgba(239,235,227,.05); color:var(--piedra);
  border:1px solid var(--filete); border-radius:0;
  transition:border-color var(--rapido), background var(--rapido);
}
.campo textarea{min-height:120px; resize:vertical}
.campo select{appearance:none; padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A8A294' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--arido)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  background:rgba(239,235,227,.09); border-color:var(--corten-cl)}
.campo .ayuda{font-size:var(--t-pie); color:var(--arido)}
.campo .err{font-size:var(--t-pie); color:#F0AE96; display:none; align-items:center; gap:.4rem}
.campo.mal input,.campo.mal select,.campo.mal textarea{border-color:#C4705A}
.campo.mal .err{display:flex}
.resumen-err{display:none; grid-column:1/-1; padding:1rem 1.2rem;
             border:1px solid #C4705A; background:rgba(196,112,90,.13)}
.resumen-err.activo{display:block}
.resumen-err h3{font-size:.95rem; font-weight:600; margin-bottom:.4rem}
.resumen-err a{text-decoration:underline; text-underline-offset:3px; font-size:.9rem}
.resumen-err li{padding-block:.12rem}

/* ── 16 · Pie ───────────────────────────────────────────────────────────── */
.pie{padding-block:clamp(3rem,6vw,4.5rem) calc(1.5rem + env(safe-area-inset-bottom))}
.pie__grid{display:grid; gap:2rem}
@media (min-width:820px){.pie__grid{grid-template-columns:1.5fr 1fr 1fr}}
.pie h3{font-variation-settings:'wdth' 114; font-size:var(--t-micro); font-weight:500;
        letter-spacing:.17em; text-transform:uppercase; color:var(--arido); margin-bottom:.9rem}
.pie li a,.pie p a{display:inline-flex; align-items:center; min-height:40px; font-size:.95rem}
.pie li a:hover,.pie p a:hover{color:var(--corten-cl)}
.pie__marca svg{width:96px; height:auto}
.pie__marca svg [stroke]{stroke:var(--piedra)}
.pie__barra{margin-top:2.75rem; padding-top:1.3rem; border-top:1px solid var(--filete);
            display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between;
            font-size:var(--t-pie); color:var(--arido)}

/* ── 17 · WhatsApp flotante ─────────────────────────────────────────────── */
.wa{
  position:fixed; z-index:var(--z-nav);
  right:max(1rem,env(safe-area-inset-right)); bottom:calc(1rem + env(safe-area-inset-bottom));
  width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  background:var(--tinta); color:var(--piedra); box-shadow:0 8px 26px rgba(25,26,23,.24);
  transform:scale(0); transition:transform 420ms var(--suave-e), background var(--rapido);
}
.wa.activo{transform:scale(1)}
/* Sin JS nadie le pone la clase: el botón tiene que estar visible igual. */
.sin-js .wa{transform:scale(1)}
.solo-sin-js{display:none}
.sin-js .solo-sin-js{display:block}
.wa:hover{background:var(--corten)}
.wa svg{width:26px; height:26px; fill:currentColor}

/* ── 18 · Ficha de lote ─────────────────────────────────────────────────── */
.ficha__cab{display:grid; gap:1.5rem}
@media (min-width:900px){.ficha__cab{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                                     gap:clamp(2rem,5vw,4.5rem); align-items:start}}
.ficha__n{font-family:var(--display); font-size:clamp(4.5rem,17vw,11rem); line-height:.82;
          font-weight:400; letter-spacing:-.03em}
.ficha__tabla{border-top:1px solid var(--filete)}
.ficha__tabla > div{display:flex; justify-content:space-between; gap:1.5rem;
                    padding:.95rem 0; border-bottom:1px solid var(--filete)}
.ficha__tabla dt{color:var(--suave); font-size:.95rem}
.ficha__tabla dd{font-weight:500; text-align:right; font-variant-numeric:tabular-nums}
.ficha__sit{border-left:2px solid var(--corten); padding-left:1.2rem; margin-block:1.75rem}
.migas{display:flex; flex-wrap:wrap; gap:.5rem; font-size:var(--t-pie); color:var(--suave)}
.migas a:hover{color:var(--corten)}
.migas li:not(:last-child)::after{content:'/'; margin-left:.5rem; color:var(--arido)}
.otros{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--filete);
       border-block:1px solid var(--filete)}
@media (min-width:680px){.otros{grid-template-columns:repeat(4,1fr)}}
.otros a{background:var(--fondo); padding:1.1rem 1rem; min-height:88px; display:grid; align-content:center;
         transition:background var(--rapido)}
.otros a:hover{background:var(--piedra-2)}
.otros b{font-family:var(--display); font-size:1.5rem; font-weight:400; display:block}
.otros span{font-size:var(--t-pie); color:var(--suave)}
.otros [aria-current]{background:var(--piedra-2)}

/* ── 19 · Movimiento ────────────────────────────────────────────────────── */
/* Una sola secuencia orquestada, en la portada. El resto es estado. */
.j-portada .p-anim{opacity:0; transform:translate3d(0,18px,0)}
.j-portada.lista-anim .p-anim{
  opacity:1; transform:none;
  transition:opacity 780ms var(--suave-e), transform 780ms var(--suave-e);
  transition-delay:calc(var(--i,0) * 110ms);
}
.j-portada.lista-anim .p-vel{
  transition-duration:1400ms; transition-delay:0ms;
}
.j-portada .p-vel{clip-path:inset(0 0 100% 0)}
.j-portada.lista-anim .p-vel{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .j-portada .p-anim{opacity:1; transform:none}
  .j-portada .p-vel{clip-path:none}
}
@media print{.nav,.wa,.menu,.visor,.conmutador{display:none!important}}

/* ── 12 · Recorrido en video ────────────────────────────────────────────────
   El video es el único elemento del sitio que no es un documento técnico, así
   que se lo trata como una lámina: filete, cota al pie y nada de cromo. */
.video{margin:0}
.video__marco{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--tinta-2) url('../img/curvas-oscuras.svg') center/cover no-repeat;
  border:1px solid color-mix(in srgb, var(--arido) 35%, transparent);
}
.video__el{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  object-fit:cover; display:block; background:var(--tinta-2);
}
.video__sin{position:relative; z-index:3; padding:clamp(1rem,3vw,2rem); color:var(--piedra)}
.video__sin a{color:var(--corten-cl)}

.video__play{
  position:absolute; inset:0; z-index:4; width:100%; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.7rem,1.6vw,1rem); color:var(--piedra); touch-action:manipulation;
  background:
    radial-gradient(44% 54% at 50% 46%, rgba(15,17,14,.62), transparent 72%),
    linear-gradient(to top, rgba(15,17,14,.80), rgba(15,17,14,.14) 58%, rgba(15,17,14,.46));
  transition:background var(--medio) var(--sal);
}
.video__play[hidden]{display:none}
.video__play:hover{
  background:
    radial-gradient(44% 54% at 50% 46%, rgba(15,17,14,.5), transparent 72%),
    linear-gradient(to top, rgba(15,17,14,.7), rgba(15,17,14,.08) 58%, rgba(15,17,14,.36));
}
.video__aro{
  display:grid; place-items:center; border-radius:50%;
  width:clamp(62px,7vw,88px); height:clamp(62px,7vw,88px);
  border:1px solid var(--corten-cl); color:var(--corten-cl);
  background:rgba(15,17,14,.34);
  transition:transform var(--medio) var(--sal), background var(--medio) var(--sal);
}
.video__aro svg{width:38%; height:38%; margin-left:8%}
.video__play:hover .video__aro{transform:scale(1.06); background:color-mix(in srgb, var(--corten) 30%, transparent)}
.video__play:focus-visible .video__aro{transform:scale(1.06)}
.video__rot{font-family:var(--display); font-weight:400; font-size:var(--t-h3); line-height:1}
.video__dur{
  font-family:var(--texto-f); font-variation-settings:'wdth' 112;
  font-size:var(--t-micro); font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--arido);
}
.video__pie{
  display:flex; align-items:flex-start; gap:.85rem; margin-top:1rem;
  font-size:var(--t-pie); line-height:1.5; color:var(--arido); max-width:var(--medida);
}
.video__pie .cota{flex:none; margin-top:.5rem}
.video__pie .ref{
  display:block; margin-top:.4rem;
  font-variation-settings:'wdth' 112; font-size:var(--t-micro); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--arido) 80%, var(--piedra));
}

/* Teléfono: el video se va a los bordes. No es la versión de escritorio
   encogida — en una pantalla de 390 px cada píxel de ancho cuenta. */
@media (max-width:640px){
  .video__marco{
    margin-inline:calc(var(--margen) * -1);
    border-left:0; border-right:0;
  }
  .video__pie{font-size:var(--t-micro)}
}