/* =====================================================================
   Desarrollos MCC · componentes.css
   Cada componente tiene el mismo nombre en todas las páginas.
   Estados con clase: .seleccionado · .enviando · .enviado · .error
   (el estado «al pasar el mouse» es :hover y también :focus-visible).
   Catálogo completo con todos los estados: componentes.html
   ===================================================================== */

/* ============ Botón (base de «Consultar», «Simular», etc.) ============ */
.boton{--alto:var(--toque-minimo);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--alto);padding:0 24px;border-radius:var(--r-pildora);border:1px solid var(--c-linea);background:var(--c-superficie);color:var(--c-tinta);font:600 1rem/1.1 var(--fuente-texto);text-decoration:none;white-space:nowrap;box-shadow:var(--sombra-1);
  transition:transform var(--d-rapida) var(--curva-suave),box-shadow var(--d-rapida),background-color var(--d-instante),color var(--d-instante),border-color var(--d-instante)}
.boton:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.boton:active{transform:translateY(0) scale(.98)}
.boton[disabled],.boton[aria-disabled="true"]{opacity:.5;pointer-events:none}
.boton--primario{background:var(--degrade-marca);border-color:transparent;color:var(--c-sobre-marca);box-shadow:var(--sombra-marca)}
.boton--primario:hover{box-shadow:var(--sombra-marca-alta)}
.boton--claro{background:#fff;color:#2A3140;border-color:transparent}
.boton--fantasma{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.boton--grande{--alto:58px;padding:0 28px;font-size:1.0625rem}
.boton--chico{--alto:44px;padding:0 18px;font-size:.9375rem}
.boton--bloque{width:100%}
.boton__flecha{display:inline-flex;transition:transform var(--d-media) var(--curva-suave)}
.boton:hover .boton__flecha,a:hover>.boton__flecha{transform:translateX(5px)}
.boton svg,.icono{width:18px;height:18px;flex:none}

/* Estados de envío: el botón se encoge a un círculo que gira, da el tilde y vuelve. */
.boton.enviando{width:var(--alto)!important;min-width:0;padding:0;color:transparent;pointer-events:none}
.boton.enviando::after{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:girar .8s linear infinite}
.boton--secundario.enviando::after,.boton:not(.boton--primario).enviando::after{border-color:var(--c-linea);border-top-color:var(--c-marca)}
.boton.enviado{width:var(--alto)!important;min-width:0;padding:0;background:var(--c-exito);border-color:transparent;color:transparent;pointer-events:none;box-shadow:var(--sombra-exito)}
.boton.enviado::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:22px;margin:-14px 0 0 -6px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);animation:saltar var(--d-media) var(--curva-salida) both}
.boton.error{background:var(--c-error);border-color:transparent;color:#fff;animation:temblar .4s both;box-shadow:none}

/* ============ Botón «Consultar» ============
   Siempre el mismo texto y destino (consulta.html, con la unidad si la hay). */
.boton-consultar{}

/* ============ Etiqueta de estado ============ */
.etiqueta-estado{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 12px 0 9px;border-radius:var(--r-pildora);border:1px solid currentColor;font:600 .8125rem/1 var(--fuente-texto);white-space:nowrap}
.etiqueta-estado::before{content:"";width:11px;height:11px;flex:none;border-radius:50%;border:2px solid currentColor}
.etiqueta-estado.disponible{color:var(--e-disponible);background:var(--e-disponible-suave)}
.etiqueta-estado.reservado{color:var(--e-reservado);background:var(--e-reservado-suave);border-style:dashed}
.etiqueta-estado.reservado::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.etiqueta-estado.vendido{color:var(--e-vendido);background:var(--e-vendido-suave)}
.etiqueta-estado.vendido::before{border-radius:2px;background:currentColor;clip-path:polygon(15% 0,50% 35%,85% 0,100% 15%,65% 50%,100% 85%,85% 100%,50% 65%,15% 100%,0 85%,35% 50%,0 15%);border:0}
.etiqueta-estado.no-disponible{color:var(--e-no-disponible);background:var(--e-no-disponible-suave);border-style:dotted}
.etiqueta-estado.no-disponible::before{border-radius:2px;height:3px;border:0;background:currentColor}
.etiqueta-estado.en-vivo::before{border:0;width:8px;height:8px;background:currentColor}

/* ============ Cabecera ============ */
.cabecera{position:sticky;top:12px;z-index:var(--z-cabecera);margin:12px auto 0;width:calc(100% - 24px);max-width:1280px;border-radius:var(--r-pildora);background:color-mix(in srgb,var(--c-superficie) 92%,transparent);border:1px solid var(--c-linea);box-shadow:var(--sombra-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cabecera__fila{display:flex;align-items:center;gap:24px;height:var(--alto-cabecera);padding:0 10px 0 22px}
.cabecera__marca{display:flex;align-items:center;min-height:var(--toque-minimo)}
.cabecera__marca img{height:30px;width:auto}
.cabecera__nav{display:flex;gap:6px;margin-left:12px}
.cabecera__nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-pildora);color:var(--c-tinta-2);font:500 .9375rem var(--fuente-texto);text-decoration:none;transition:color var(--d-instante),background-color var(--d-instante)}
.cabecera__nav a:hover{color:var(--c-tinta);background:var(--c-fondo-2)}
.cabecera__nav a[aria-current="page"]{color:var(--c-tinta)}
.cabecera__nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:3px;background:var(--degrade-suave)}
.cabecera__acciones{margin-left:auto;display:flex;align-items:center;gap:10px}
.cabecera__menu{display:none;width:var(--toque-minimo);height:var(--toque-minimo);border-radius:50%;border:1px solid var(--c-linea);background:var(--c-superficie);align-items:center;justify-content:center}
.logo-oscuro{display:none}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .logo-claro{display:none}:root:not([data-tema="claro"]) .logo-oscuro{display:block}}

/* ============ Acceso a inmobiliarias (muy destacado) ============ */
@property --giro{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes girar-borde{to{--giro:360deg}}
.acceso-inmobiliarias{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;min-height:var(--toque-minimo);padding:0 18px 0 6px;border-radius:var(--r-pildora);background:var(--c-superficie);color:var(--c-tinta);font:700 .875rem/1.15 var(--fuente-texto);text-decoration:none;transition:transform var(--d-rapida) var(--curva-suave)}
/* El borde gira sólo al pasar el mouse o con el foco (11/11/2026): quieto, no le compite al comprador. */
.acceso-inmobiliarias::before{content:"";position:absolute;inset:-1px;z-index:-2;border-radius:inherit;background:var(--c-linea)}
.acceso-inmobiliarias:hover::before,.acceso-inmobiliarias:focus-visible::before{inset:-2px;background:conic-gradient(from var(--giro),#E9505B,#F2A46F,#9CC3F5,#B9A8F5,#E9505B);animation:girar-borde var(--d-llave) linear infinite}
.acceso-inmobiliarias::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--c-superficie)}
.acceso-inmobiliarias:hover{transform:translateY(-2px)}
.acceso-inmobiliarias__llave{width:36px;height:36px;border-radius:50%;background:var(--degrade-marca);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.acceso-inmobiliarias small{display:block;font:500 .75rem var(--fuente-texto);color:var(--c-tinta-3)}

/* ============ Menú del celular ============ */
.menu-movil{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:var(--z-menu);padding:10px;border-radius:var(--r-grande);background:var(--c-superficie);border:1px solid var(--c-linea);box-shadow:var(--sombra-3);animation:subir var(--d-media) var(--curva-salida) both}
.menu-movil[hidden]{display:none}
.menu-movil a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 16px;border-radius:var(--r-medio);font:600 1.125rem var(--fuente-texto);text-decoration:none}
.menu-movil a:hover,.menu-movil a[aria-current="page"]{background:var(--c-fondo-2)}
.menu-movil__fondo{position:fixed;inset:0;z-index:calc(var(--z-cabecera) - 1);background:rgba(20,24,40,.28);animation:aparecer var(--d-rapida) both}
.menu-movil__fondo[hidden]{display:none}

/* ============ Portada (marco redondeado con foto) ============ */
/* Portada más baja (12/11/2026): a 1280 × 800 ocupaba toda la pantalla y el
   plano, que es a lo que vino el visitante, no asomaba sin bajar. */
.portada{position:relative;isolation:isolate;margin:14px;border-radius:var(--r-enorme);overflow:hidden;color:#fff;min-height:min(44vh,400px);display:flex;align-items:flex-end;background:#20242c}
.portada>img,.portada>picture>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;animation:alejar 2.2s var(--curva-salida) both}
@keyframes alejar{from{transform:scale(1.08)}to{transform:none}}
/* Velo más parejo (12/11/2026): con la portada más baja el texto sube y caía sobre la parte clara de la foto. */
.portada::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,24,40,.38) 0%,rgba(20,24,40,.5) 40%,rgba(20,24,40,.84) 100%)}
.portada .contenedor{padding-block:var(--e-8) var(--e-7)}
.portada .titulo-1{font-size:clamp(2.4rem,1.6rem + 3.2vw,4.5rem)}
.portada .cifras{margin-top:var(--e-5)}
.portada .ceja{color:rgba(255,255,255,.9)}
.portada .bajada{color:rgba(255,255,255,.86)}
.volver{display:inline-flex;align-items:center;gap:6px;min-height:var(--toque-minimo);color:inherit;opacity:.85;font:500 .9375rem var(--fuente-texto);text-decoration:none}
.volver:hover{opacity:1}

/* ============ Cifra (número grande + texto) ============ */
.cifras{display:flex;flex-wrap:wrap;gap:var(--e-5) var(--e-8);margin-top:var(--e-6)}
.cifra b{display:block;font:var(--peso-titulo) clamp(2rem,1.5rem + 2vw,3.25rem)/1 var(--fuente-titulos);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cifra span{display:block;margin-top:6px;font-size:var(--t-mini);opacity:.85}
.cifra.disponible b{color:#8AD3F7}

/* ============ Tarjeta de desarrollo ============ */
.tarjeta-desarrollo{position:relative;display:flex;flex-direction:column;border-radius:var(--r-grande);overflow:hidden;background:var(--c-superficie);border:1px solid var(--c-linea);box-shadow:var(--sombra-2);color:var(--c-tinta);text-decoration:none;
  transition:transform var(--d-media) var(--curva-suave),box-shadow var(--d-media),border-color var(--d-instante)}
.tarjeta-desarrollo:hover,.tarjeta-desarrollo:focus-visible{transform:translateY(-6px);box-shadow:var(--sombra-3)}
.tarjeta-desarrollo.seleccionado{border:2px solid var(--c-marca);box-shadow:var(--sombra-3)}
.tarjeta-desarrollo__foto{position:relative;aspect-ratio:16/10;overflow:hidden;background:#20242c}
.tarjeta-desarrollo__foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-foto-zoom) var(--curva-salida),filter var(--d-lenta)}
.tarjeta-desarrollo:hover .tarjeta-desarrollo__foto img{transform:scale(1.07)}
.tarjeta-desarrollo__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 35%,transparent 60%,rgba(0,0,0,.35))}
.tarjeta-desarrollo__etiquetas{position:absolute;left:14px;top:14px;z-index:1;display:flex;gap:6px;flex-wrap:wrap}
.tarjeta-desarrollo__etiquetas>span{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:var(--r-pildora);background:rgba(255,255,255,.94);color:#2A3140;font:600 .8125rem var(--fuente-texto)}
/* El estado va en blanco con un punto quieto (12/11/2026): en rojo, «Con lotes
   disponibles» y «Terminado» se veían iguales y sumaban rojo a cada tarjeta. */
.tarjeta-desarrollo__etiquetas>.en-vivo::before{content:"";width:8px;height:8px;border-radius:50%;background:#075C84}
.tarjeta-desarrollo__cuerpo{display:flex;flex-direction:column;gap:var(--e-4);padding:var(--e-6);flex:1}
.tarjeta-desarrollo__lugar{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--c-tinta-2);font-size:var(--t-chico)}
.tarjeta-desarrollo__ir{margin-top:auto;display:inline-flex;align-items:center;gap:10px;min-height:var(--toque-minimo);font-weight:700;color:var(--c-marca-texto)}
.tarjeta-desarrollo:hover .boton__flecha{transform:translateX(6px)}
/* Próximamente, con su color (12/11/2026): en blanco y negro parecía cerrado. */
.tarjeta-desarrollo.proximamente .tarjeta-desarrollo__foto img{filter:brightness(.88)}
.tarjeta-desarrollo.proximamente:hover .tarjeta-desarrollo__foto img{filter:none}
.sello-proximamente{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%) rotate(-4deg);padding:12px 22px;border-radius:var(--r-pildora);background:rgba(255,255,255,.96);color:#2A3140;font:800 1.35rem var(--fuente-titulos);letter-spacing:-.02em;box-shadow:var(--sombra-3);white-space:nowrap}
@media (min-width:900px){
  .tarjeta-desarrollo--destacada{flex-direction:row;min-height:500px}
  .tarjeta-desarrollo--destacada .tarjeta-desarrollo__foto{aspect-ratio:auto;width:58%}
  .tarjeta-desarrollo--destacada .tarjeta-desarrollo__cuerpo{padding:var(--e-8);justify-content:center}
}

/* Datos de 3 en una tarjeta */
.datos-tarjeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.datos-tarjeta>div{padding:12px;border-radius:var(--r-chico);background:var(--c-fondo-2)}
.datos-tarjeta b{display:block;font:800 clamp(1.15rem,1rem + .6vw,1.6rem)/1 var(--fuente-titulos);letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.datos-tarjeta span{display:block;margin-top:5px;font-size:var(--t-mini);line-height:1.3;color:var(--c-tinta-2);hyphens:auto}

/* Barra de disponibilidad */
.barra-disponibilidad{display:flex;gap:3px;height:10px}
.barra-disponibilidad>i{display:block;height:100%;border-radius:var(--r-pildora);transform-origin:left;animation:crecer-x 1.1s var(--curva-salida) both}
.barra-disponibilidad>.disponible{background:#5BC0F5}
.barra-disponibilidad>.reservado{background:#F2B33D}
.barra-disponibilidad>.vendido{background:#3B4150}
.barra-disponibilidad>.no-disponible{background:repeating-linear-gradient(90deg,#C9CED8 0 3px,#E4E7EE 3px 6px)}
.barra-leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--t-mini);color:var(--c-tinta-2)}
.barra-leyenda span{display:inline-flex;align-items:center;gap:6px}
.barra-leyenda i{width:10px;height:10px;border-radius:3px}

/* ============ Plano interactivo ============
   Cada lote es un <polygon class="lote disponible" data-lote="14">.
   El estado cambia SÓLO con la clase: disponible · reservado · vendido · no-disponible. */
.plano{position:relative;border-radius:var(--r-grande);overflow:hidden;background:#1c1f1a;touch-action:none;user-select:none;-webkit-user-select:none}
.plano--claro{background:#fff;border:1px solid var(--c-linea)}
.plano__svg{display:block;width:100%;height:auto;cursor:grab}
.plano__svg.arrastrando{cursor:grabbing}
.plano__foto{filter:saturate(.85)}
.lote{stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;cursor:pointer;transform-box:fill-box;transform-origin:center;outline:none;
  transition:fill var(--d-rapida),opacity var(--d-media),transform var(--d-media) var(--curva-suave),filter var(--d-media)}
.lote.disponible{fill:var(--e-disponible-relleno);stroke:var(--e-disponible-borde);stroke-width:2.2}
.lote.reservado{fill:url(#trama-reservado);stroke:var(--e-reservado-borde);stroke-dasharray:7 4}
.lote.vendido{fill:url(#trama-vendido);stroke:var(--e-vendido-borde);stroke-width:1.2}
.lote.no-disponible{fill:url(#trama-no-disponible);stroke:var(--e-no-disponible-borde);stroke-width:1;stroke-dasharray:2 3;cursor:default;pointer-events:none}
/* Al pasar el mouse o con el teclado, el lote se levanta del plano con su sombra. */
.lote:hover,.lote:focus-visible,.lote.activo{transform:translateY(-6px) scale(1.04);filter:drop-shadow(0 10px 8px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,255,255,.7))}
.lote.disponible:hover,.lote.disponible.activo{fill:rgba(60,190,255,.68)}
/* El elegido casi sin relleno (12/11/2026): con el azul oscuro al 62 % el número
   pintado en la foto quedaba tapado. Lo marca el borde blanco grueso con un
   contorno oscuro y la sombra; el número de la foto se lee entero. */
.lote.seleccionado,.lote.disponible.seleccionado{fill:rgba(255,255,255,.06);transform:translateY(-6px) scale(1.04);stroke:#fff;stroke-width:5;filter:drop-shadow(0 0 1.5px rgba(4,30,52,1)) drop-shadow(0 0 1.5px rgba(4,30,52,1)) drop-shadow(0 10px 8px rgba(0,0,0,.5))}
.lote.atenuado{opacity:.18;pointer-events:none}
.plano.hay-activo .lote:not(.activo):not(.seleccionado){opacity:.62}
.plano__numero{font:700 22px var(--fuente-texto);fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:3px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
@keyframes ola{0%,100%{fill-opacity:1}50%{fill-opacity:.35}}
.plano.recien-cargado .lote.disponible{animation:ola 1.6s ease-in-out both;animation-delay:calc(var(--i,0) * 22ms + 400ms)}
.plano__controles{position:absolute;right:12px;top:12px;z-index:var(--z-plano-controles);display:flex;flex-direction:column;gap:8px}
.plano__control{width:var(--toque-minimo);height:var(--toque-minimo);border-radius:14px;border:0;background:rgba(16,15,13,.74);color:#fff;display:flex;align-items:center;justify-content:center;transition:background-color var(--d-instante)}
.plano__control:hover{background:rgba(16,15,13,.92)}
.plano__ayuda{position:absolute;left:14px;bottom:14px;z-index:var(--z-plano-controles);padding:8px 12px;border-radius:var(--r-pildora);background:rgba(0,0,0,.55);color:#fff;font-size:var(--t-mini)}

/* Tarjeta flotante del lote (al pasar el mouse o tocar) */
.tarjeta-lote{position:absolute;z-index:var(--z-tarjeta-lote);width:290px;padding:18px;border-radius:var(--r-medio);background:var(--c-superficie);color:var(--c-tinta);box-shadow:var(--sombra-3);pointer-events:none;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--d-rapida),transform var(--d-rapida) var(--curva-salida)}
.tarjeta-lote.visible{opacity:1;transform:none}
.tarjeta-lote.seleccionado{pointer-events:auto;border:2px solid var(--c-marca)}
.tarjeta-lote__cabeza{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tarjeta-lote__acciones{display:none;gap:8px;margin-top:14px}
.tarjeta-lote.seleccionado .tarjeta-lote__acciones{display:flex}
.tarjeta-lote__pista{margin-top:10px;font-size:var(--t-mini);color:var(--c-tinta-3)}
.tarjeta-lote.seleccionado .tarjeta-lote__pista{display:none}
/* En el celular y la tableta (<900 px) la tarjeta es una hoja debajo del plano,
   sin taparlo, y aparece recién cuando se elige un lote (11/11/2026). */
@media (max-width:899px){
  .tarjeta-lote{position:relative;left:auto!important;top:auto!important;width:auto;margin:12px 0 0;pointer-events:auto;opacity:1;transform:none;display:none}
  .tarjeta-lote.seleccionado{display:block}
  .tarjeta-lote .tarjeta-lote__acciones{display:flex}
  .tarjeta-lote .tarjeta-lote__pista{display:none}
}
/* «Consultar por este lote» es la acción principal de la tarjeta: ocupa la fila entera. */
.tarjeta-lote__acciones [data-a="consultar"]{flex-basis:100%}

/* Leyenda que filtra por estado */
.leyenda-estados{display:flex;flex-wrap:wrap;gap:8px}
.filtro-estado{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;white-space:nowrap;border-radius:var(--r-pildora);border:1px solid var(--c-linea);background:var(--c-superficie);font:500 .875rem var(--fuente-texto);color:var(--c-tinta-2);transition:opacity var(--d-rapida),background-color var(--d-instante)}
.filtro-estado b{color:var(--c-tinta);font-weight:700}
.filtro-estado[aria-pressed="false"]{opacity:.45}
.filtro-estado:hover{background:var(--c-fondo-2)}
.muestra-estado{width:22px;height:14px;border-radius:4px;flex:none}
.muestra-estado.disponible{background:rgba(60,190,255,.55);border:1.5px solid var(--e-disponible)}
.muestra-estado.reservado{background:repeating-linear-gradient(45deg,#F2B33D 0 4px,rgba(242,179,61,.3) 4px 8px);border:1.5px dashed var(--e-reservado)}
.muestra-estado.vendido{background:repeating-linear-gradient(135deg,#2A2D33 0 3px,#555b66 3px 4px)}
.muestra-estado.no-disponible{background:radial-gradient(circle,#9aa1ad 1px,transparent 1.5px) 0 0/5px 5px,#E4E7EE;border:1px dotted #9aa1ad}
.filtro-estado--solo{font-weight:600;color:var(--c-tinta)}
.filtro-estado--solo[aria-pressed="false"]{opacity:1}
.filtro-estado--solo[aria-pressed="true"]{background:var(--c-tinta);border-color:var(--c-tinta);color:var(--c-fondo)}
@media (max-width:719px){.leyenda-estados{display:grid;grid-template-columns:1fr 1fr}.filtro-estado--solo{grid-column:1/-1;justify-content:center}}
/* Ayuda del plano en el celular: el primer toque acerca. */
.plano__ayuda--tactil{display:none}
@media (max-width:899px){.plano__ayuda--tactil{display:block}.plano__ayuda:not(.plano__ayuda--tactil){display:none}}

/* ============ Lista de lotes / departamentos ============ */
.lista-unidades{border-radius:var(--r-grande);background:var(--c-superficie);border:1px solid var(--c-linea);box-shadow:var(--sombra-2);overflow:hidden}
.lista-unidades__cabeza{padding:18px 20px;border-bottom:1px solid var(--c-linea)}
.lista-unidades__filas{max-height:560px;overflow-y:auto;overscroll-behavior:contain}
.fila-unidad{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:12px;min-height:68px;padding:10px 20px;border-bottom:1px solid var(--c-linea);color:var(--c-tinta);text-decoration:none;transition:background-color var(--d-instante)}
.fila-unidad:hover,.fila-unidad.activo{background:var(--c-fondo-2)}
.fila-unidad.seleccionado{background:var(--c-marca-suave);box-shadow:inset 4px 0 0 var(--c-marca)}
.fila-unidad[hidden]{display:none}
.fila-unidad b{font:700 1.0625rem var(--fuente-texto)}
.fila-unidad small{display:block;color:var(--c-tinta-3);font-size:var(--t-mini)}
.rango{width:100%;height:32px;accent-color:var(--c-marca)}

/* ============ Grilla de datos (fichas) ============ */
.grilla-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dato{padding:14px 16px;border-radius:var(--r-medio);background:var(--c-fondo-2)}
.dato span{display:block;font-size:var(--t-mini);color:var(--c-tinta-3)}
.dato b{display:block;margin-top:4px;font:700 clamp(1.35rem,1.2rem + .5vw,1.7rem)/1.1 var(--fuente-titulos);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ============ Formulario ============
   Estados del formulario: normal · .enviando · .enviado · .error
   Estados del campo: normal · :focus · .campo--error · .campo--ok */
.formulario{display:flex;flex-direction:column;gap:var(--e-5)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo__etiqueta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 .9375rem var(--fuente-texto)}
.campo__etiqueta em{font:400 .8125rem var(--fuente-texto);font-style:normal;color:var(--c-tinta-3)}
.campo__entrada{width:100%;min-height:56px;padding:0 16px;border-radius:14px;border:1.5px solid var(--c-linea);background:var(--c-superficie);color:var(--c-tinta);font:500 1.0625rem var(--fuente-texto);transition:border-color var(--d-instante),box-shadow var(--d-rapida)}
textarea.campo__entrada{min-height:112px;padding:14px 16px;resize:vertical}
.campo__entrada::placeholder{color:var(--c-tinta-3)}
.campo__entrada:focus{outline:none;border-color:var(--c-marca);box-shadow:0 0 0 4px var(--c-marca-suave)}
.campo__ayuda{font-size:var(--t-mini);color:var(--c-tinta-3)}
.campo__mensaje{display:none;align-items:flex-start;gap:6px;font:500 .875rem/1.4 var(--fuente-texto)}
.campo--error .campo__entrada{border-color:var(--c-error);box-shadow:0 0 0 4px var(--c-error-suave);animation:temblar .4s both}
.campo--error .campo__mensaje{display:flex;color:var(--c-error);animation:subir var(--d-rapida) both}
.campo--ok .campo__mensaje--ok{display:flex;color:var(--c-exito)}
.campo--error .campo__mensaje--ok{display:none}
.campo--error .opciones .opcion{border-color:var(--c-error)}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{min-height:var(--toque-minimo);padding:0 18px;border-radius:var(--r-pildora);border:1.5px solid var(--c-linea);background:var(--c-superficie);font:600 .9375rem var(--fuente-texto);transition:background-color var(--d-rapida),color var(--d-rapida),border-color var(--d-rapida)}
.opcion:hover{border-color:var(--c-tinta-3)}
.opcion[aria-checked="true"],.opcion[aria-pressed="true"]{background:var(--c-tinta);border-color:var(--c-tinta);color:var(--c-fondo)}
.casilla{display:flex;gap:12px;align-items:flex-start;width:100%;padding:16px;border-radius:var(--r-medio);border:1.5px solid var(--c-linea);background:var(--c-superficie);text-align:left;transition:border-color var(--d-rapida),background-color var(--d-rapida)}
.casilla__caja{width:24px;height:24px;flex:none;border-radius:7px;border:2px solid var(--c-tinta-3);display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color var(--d-rapida),border-color var(--d-rapida)}
.casilla__caja svg{opacity:0;transform:scale(.4);transition:opacity var(--d-rapida),transform var(--d-rapida) var(--curva-salida)}
/* Marcada en tinta neutra (11/11/2026): el rojo queda sólo para .campo--error. */
.casilla[aria-checked="true"]{border-color:var(--c-tinta-2);background:var(--c-fondo-2)}
.casilla[aria-checked="true"] .casilla__caja{background:var(--c-tinta);border-color:var(--c-tinta);color:var(--c-fondo)}
.casilla[aria-checked="true"] .casilla__caja svg{opacity:1;transform:none}
.formulario__legal{font-size:var(--t-mini);color:var(--c-tinta-3);text-align:center}
.formulario.enviando .campo,.formulario.enviando .opciones,.formulario.enviando .casilla{opacity:.55;pointer-events:none;transition:opacity var(--d-rapida)}
.formulario.enviado>*:not(.confirmacion){display:none}
.formulario .confirmacion{display:none}
.formulario.enviado .confirmacion{display:block;animation:subir var(--d-lenta) var(--curva-salida) both}
.aviso-formulario{display:none;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--r-medio);font-size:var(--t-chico)}
.formulario.error .aviso-formulario:not(.aviso-formulario--conexion){display:flex;background:var(--c-error-suave);color:var(--c-error);animation:subir var(--d-rapida) both}
.formulario.sin-conexion .aviso-formulario--conexion{display:flex;background:var(--e-reservado-suave);color:var(--e-reservado)}
/* La unidad consultada: el pedazo del plano con la unidad marcada (formulario.js)
   y el nombre entero; en el celular «Cambiar» baja a su propia fila (12/11/2026:
   el nombre se armaba palabra por palabra al lado de una miniatura genérica). */
.unidad-consultada{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:12px;border-radius:var(--r-medio);background:var(--c-superficie);border:1px solid var(--c-linea)}
.unidad-consultada svg{width:96px;height:72px;border-radius:12px;flex:none;background:#1c1f1a}
.unidad-consultada svg.unidad-consultada__planta{background:#fff;border:1px solid var(--c-linea)}
.unidad-consultada .boton{margin-left:auto}
@media (max-width:480px){.unidad-consultada svg{width:72px;height:56px}.unidad-consultada>div{flex:1 1 140px}}

/* Confirmación con línea de tiempo */
.confirmacion__tilde{width:64px;height:64px;border-radius:50%;background:var(--c-exito);color:#fff;display:flex;align-items:center;justify-content:center;animation:saltar var(--d-lenta) var(--curva-salida) both}
/* El foco que se lleva la confirmación (para el lector de pantalla) no se dibuja:
   el contorno rojo parecía un error (12/11/2026). */
.formulario .confirmacion:focus{outline:none}
.linea-tiempo{display:flex;flex-direction:column;margin-top:var(--e-5)}
.linea-tiempo li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding-bottom:18px}
.linea-tiempo li::before{content:"";position:absolute;left:16px;top:36px;bottom:0;width:2px;background:var(--c-linea)}
.linea-tiempo li:last-child::before{display:none}
.linea-tiempo i{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .875rem var(--fuente-texto);font-style:normal;background:var(--c-fondo-2);color:var(--c-tinta-2)}
.linea-tiempo .hecho i{background:var(--c-exito);color:#fff}

/* ============ WhatsApp flotante ============
   Componente listo pero APAGADO: el pedido actual es no usar WhatsApp.
   Para prenderlo: <html data-whatsapp="activo"> y poner el número en datos.js. */
.whatsapp-flotante{position:fixed;right:18px;bottom:96px;z-index:var(--z-barra-pulgar);display:none;align-items:center;gap:10px;min-height:58px;padding:0 20px 0 16px;border-radius:var(--r-pildora);background:var(--c-whatsapp);color:#fff;font:700 1rem var(--fuente-texto);text-decoration:none;box-shadow:var(--sombra-exito);animation:saltar var(--d-lenta) .8s var(--curva-salida) both;transition:transform var(--d-rapida) var(--curva-suave),box-shadow var(--d-rapida)}
html[data-whatsapp="activo"] .whatsapp-flotante{display:inline-flex}
.whatsapp-flotante:hover{transform:translateY(-3px);box-shadow:var(--sombra-2)}
.whatsapp-flotante.seleccionado{background:#11602F}
.whatsapp-flotante.enviando{pointer-events:none;opacity:.8}
.whatsapp-flotante.enviado{background:var(--c-exito)}
.whatsapp-flotante.error{background:var(--c-error);animation:temblar .4s both}

/* ============ Barra del pulgar (sólo celular) ============ */
.barra-pulgar{display:none}
@media (max-width:719px){
  .barra-pulgar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:var(--z-barra-pulgar);display:flex;gap:8px;padding:8px;border-radius:var(--r-grande);background:color-mix(in srgb,var(--c-superficie) 94%,transparent);border:1px solid var(--c-linea);box-shadow:var(--sombra-3);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .barra-pulgar .boton{flex:1;padding:0 12px;box-shadow:none}
  .barra-pulgar .boton--icono{flex:0 0 var(--toque-minimo);padding:0}
  body{padding-bottom:96px}
  .whatsapp-flotante{bottom:96px}
}

/* ============ Simulador ============ */
.paso{padding:var(--e-6);border-radius:var(--r-grande);background:var(--c-superficie);border:1px solid var(--c-linea);box-shadow:var(--sombra-2)}
.paso+.paso{margin-top:var(--e-4)}
.paso__cabeza{display:flex;align-items:center;gap:12px;margin-bottom:var(--e-4)}
.paso__numero{width:34px;height:34px;border-radius:50%;background:var(--degrade-marca);color:#fff;display:flex;align-items:center;justify-content:center;font:800 .9375rem var(--fuente-titulos);flex:none}
.opciones-compra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opcion-compra{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:3px;align-content:center;min-height:104px;padding:10px 44px 10px 10px;border-radius:var(--r-medio);border:2px solid var(--c-linea);background:var(--c-superficie);text-align:left;transition:transform var(--d-media) var(--curva-suave),border-color var(--d-rapida),box-shadow var(--d-media)}
.opcion-compra:hover{transform:translateY(-3px)}
.opcion-compra[aria-checked="true"]{border-color:var(--c-marca);box-shadow:var(--sombra-2)}
.opcion-compra img,.opcion-compra .opcion-compra__color{grid-row:1/3;width:84px;height:84px;border-radius:14px;object-fit:cover;background:var(--degrade-suave)}
/* Columna fija: con la foto en <picture> el texto caía debajo de la foto (12/11/2026). */
.opcion-compra b{grid-column:2;grid-row:1;align-self:end;font:700 1rem/1.25 var(--fuente-texto)}
.opcion-compra small{grid-column:2;grid-row:2;align-self:start;font-size:var(--t-mini);line-height:1.35;color:var(--c-tinta-3)}
.opcion-compra::after{content:"";position:absolute;right:12px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;border:2px solid var(--c-linea);transition:all var(--d-rapida)}
.opcion-compra[aria-checked="true"]::after{border:7px solid var(--c-marca)}
.control-rango__cabeza{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px}
.control-rango__cabeza b{font:800 1.4rem var(--fuente-titulos);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.resultado-cuota{position:sticky;top:calc(var(--alto-cabecera) + 32px);overflow:hidden;padding:var(--e-7);border-radius:var(--r-enorme);background:var(--c-superficie);border:1px solid var(--c-linea);box-shadow:var(--sombra-3)}
.cuota-grande{display:block;font:800 clamp(2.6rem,2rem + 2.4vw,4rem)/1.12 var(--fuente-titulos);letter-spacing:-.05em;white-space:nowrap;color:var(--c-marca-texto);font-variant-numeric:tabular-nums}
.cuota-grande.cambio{animation:saltar var(--d-media) var(--curva-salida)}
.desglose{margin:var(--e-5) 0;border-top:1px solid var(--c-linea)}
.desglose div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--c-linea);font-size:var(--t-chico)}
.desglose dt{color:var(--c-tinta-2)}.desglose dd{margin:0;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.anillo{width:86px;height:86px;flex:none}
.anillo circle{transition:stroke-dasharray var(--d-media) var(--curva-suave)}
@media (max-width:719px){.opciones-compra{grid-template-columns:1fr}.resultado-cuota{position:relative;top:0;padding:var(--e-6)}}

/* ============ Galería y visor ============ */
.pestanas{display:flex;flex-wrap:wrap;gap:8px}
.pestana{min-height:var(--toque-minimo);padding:0 18px;border-radius:var(--r-pildora);border:1px solid var(--c-linea);background:var(--c-superficie);font:600 .9375rem var(--fuente-texto);transition:background-color var(--d-rapida),color var(--d-rapida)}
.pestana[aria-selected="true"]{background:var(--c-tinta);color:var(--c-fondo);border-color:var(--c-tinta)}
.pestana span{opacity:.55;margin-left:6px;font-weight:500}
.mosaico{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.foto{position:relative;display:block;width:100%;margin:0;aspect-ratio:4/3;padding:0;border:0;border-radius:var(--r-medio);overflow:hidden;background:#222;break-inside:avoid;cursor:zoom-in;animation:subir var(--d-lenta) var(--curva-salida) both}
/* La figura llena el cuadro (12/11/2026): una foto más apaisada que 4:3 («El
   loteo desde el sur») dejaba una franja negra. */
.foto>figure{position:absolute;inset:0}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-foto-zoom) var(--curva-salida)}
.foto:hover img{transform:scale(1.05)}
.foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));color:#fff;font:500 .9375rem var(--fuente-texto);text-align:left}
.visor{position:fixed;inset:0;z-index:var(--z-visor);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:#0A0908;color:#fff;animation:aparecer var(--d-rapida) both}
.visor[hidden]{display:none}
.visor img{max-width:100%;max-height:72vh;border-radius:14px;animation:saltar var(--d-media) var(--curva-salida) both}
.visor__botones{display:flex;gap:12px}
.visor__boton{width:54px;height:54px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center}
.visor__boton:hover{background:rgba(255,255,255,.24)}

/* ============ Chips de filtro ============ */
.filtros{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.filtros::-webkit-scrollbar{display:none}
.filtro{flex:none;min-height:46px;padding:0 18px;border-radius:var(--r-pildora);border:1px solid var(--c-linea);background:var(--c-superficie);font:600 .9375rem var(--fuente-texto);transition:background-color var(--d-rapida),color var(--d-rapida),transform var(--d-rapida)}
.filtro:hover{transform:translateY(-2px)}
.filtro[aria-pressed="true"]{background:var(--c-tinta);color:var(--c-fondo);border-color:var(--c-tinta)}
.filtro span{opacity:.55;margin-left:6px;font-weight:500}

/* ============ Lista de servicios ============ */
.servicios{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.servicios li{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;border-radius:var(--r-medio);background:var(--c-superficie);border:1px solid var(--c-linea);font-weight:500}
.servicios li::before{content:"";width:28px;height:28px;flex:none;border-radius:9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/16px no-repeat,var(--degrade-marca)}

/* ============ Banda de inmobiliarias ============ */
.banda-inmobiliarias{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:var(--e-7);flex-wrap:wrap;padding:var(--e-8);border-radius:var(--r-enorme);background:linear-gradient(135deg,#3D2A6B,#6B3F86 50%,#9A456A);color:#fff;box-shadow:var(--sombra-3)}
.banda-inmobiliarias::before{content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,213,138,.35),transparent 70%)}
.banda-inmobiliarias>*{position:relative}
.banda-inmobiliarias .ceja{color:#FFD58A}

/* ============ Banda de llamado (degradé) ============ */
.banda-llamado{display:flex;align-items:center;justify-content:space-between;gap:var(--e-6);flex-wrap:wrap;padding:var(--e-8);border-radius:var(--r-enorme);background:var(--degrade-marca);color:#fff;box-shadow:var(--sombra-marca)}

/* ============ Aviso (toast) ============ */
.aviso{position:fixed;left:50%;bottom:30px;z-index:var(--z-aviso);transform:translateX(-50%);max-width:calc(100% - 32px);padding:14px 20px;border-radius:var(--r-pildora);background:var(--c-tinta);color:var(--c-fondo);font:600 .9375rem var(--fuente-texto);box-shadow:var(--sombra-3);animation:saltar var(--d-media) var(--curva-salida) both}
.aviso[hidden]{display:none}
@media (max-width:719px){.aviso{bottom:110px}}

/* ============ Pie ============ */
.pie{margin:0 14px 14px;padding:var(--e-9) 0 var(--e-7);border-radius:var(--r-enorme);background:var(--c-oscuro);color:#fff;position:relative;overflow:hidden}
.pie::before{content:"";position:absolute;right:-100px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(242,164,111,.28),transparent 70%)}
.pie>*{position:relative}
.pie__columnas{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--e-7)}
.pie h2{font:600 var(--t-chico) var(--fuente-texto);opacity:.75;margin-bottom:10px}
.pie a{display:flex;align-items:center;min-height:36px;color:#fff;opacity:.9;text-decoration:none;font-size:.9375rem}
.pie a:hover{opacity:1;text-decoration:underline}
.pie p{opacity:.8;font-size:.9375rem;line-height:1.6}
.pie__legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:var(--e-8);padding-top:var(--e-5);border-top:1px solid rgba(255,255,255,.12);font-size:var(--t-mini);opacity:.7}
.pie .acceso-inmobiliarias{display:inline-flex;margin-top:8px;opacity:1;text-decoration:none;color:var(--c-tinta)}
.pie .acceso-inmobiliarias:hover{text-decoration:none}
@media (max-width:899px){.pie__columnas{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie__columnas{grid-template-columns:1fr}}

/* ============ Cabecera en celular ============ */
@media (max-width:899px){
  .cabecera{top:8px;margin-top:8px;width:calc(100% - 16px)}
  .cabecera__fila{gap:8px;height:60px;padding:0 6px 0 14px}
  .cabecera__marca img{height:24px}
  .cabecera__nav,.cabecera__acciones .boton-consultar{display:none}
  .cabecera__menu{display:inline-flex}
  /* En el celular el acceso de inmobiliarias vive en el menú y en el pie: la cabecera es del comprador. */
  .cabecera .acceso-inmobiliarias{display:none}
  .portada{margin:10px;border-radius:var(--r-grande);min-height:min(70vh,520px)}
}

/* Franja de una línea del inicio para las inmobiliarias (reemplaza la banda de página entera). */
.franja-inmobiliarias{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3) var(--e-5);flex-wrap:wrap;min-height:var(--toque-minimo);padding:10px 20px;border-radius:var(--r-pildora);border:1px solid var(--c-linea);background:var(--c-superficie);color:var(--c-tinta-2);font-size:var(--t-chico);text-decoration:none}
.franja-inmobiliarias b{color:var(--c-tinta);font-weight:600}
.franja-inmobiliarias__ir{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--c-marca-texto)}
.franja-inmobiliarias:hover .boton__flecha{transform:translateX(5px)}
@media (max-width:719px){.franja-inmobiliarias{border-radius:var(--r-medio)}}

/* La cabecera fija no tapa lo que llega con el teclado o con un ancla. */
:focus-visible,[id]{scroll-margin-top:calc(var(--alto-cabecera) + 32px)}
/* En el celular, lo que llega con el teclado o con un error (el foco que pone
   formulario.js no es :focus-visible) queda por encima de la barra fija (12/11/2026:
   el error de «¿Sos socio?» quedaba tapado). */
.campo__entrada,.campo [role="radio"]{scroll-margin-top:calc(var(--alto-cabecera) + 32px)}
@media (max-width:719px){:focus-visible,.campo__entrada,.campo [role="radio"]{scroll-margin-bottom:120px}}