/* ══════════════════════════════════════════════════════════════════════
   Inmoclick · Sistema visual
   Dirección: portal inmobiliario americano. Papel blanco, mucho aire y la
   foto mandando; el cromo se retira para que el inventario ocupe la pantalla,
   con la escala tipográfica apretada de las grotéscas modernas.

   Toda la interfaz es azul, del mismo cian del tejado del isotipo (#59e0ff),
   en tres escalones: `--tinta` (#0a3348) para el texto y las superficies
   oscuras —donde otro portal pondría negro—, `--acento` (#0e6a94) para todo
   lo que se pulsa, y el cian puro (`--acento-vivo`) reservado a los fondos
   oscuros, que es el único sitio donde aguanta el contraste. Los grises no
   son neutros: llevan el mismo sesgo azul, o al lado de la interfaz se leen
   como suciedad.

   El precio sigue siendo el protagonista, pero ahora en sans con cifras
   tabulares: en una rejilla de doce tarjetas lo que se compara es la
   magnitud, y para eso los dígitos tienen que alinearse en columna.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Tinta y papel */
  --tinta:#0a3348;
  --tinta-2:#4c6b7b;
  --tinta-3:#7d9dad;
  --papel:#ffffff;
  --panel:#ffffff;
  /* Banda de reposo: separa secciones sin dibujar una caja. */
  --velo:#f1f7fa;
  --linea:#dde8ee;
  --linea-fuerte:#c3d5df;

  /* Voz principal */
  --acento:#0e6a94;
  --acento-vivo:#1fd5ff;
  --acento-suave:#e6f6fd;
  --acento-borde:#a9e2f7;

  /* Acento cálido: se reserva para avisos, no para adorno. */
  --ladrillo:#a8442a;
  --ladrillo-suave:#fbeee9;

  /* Semánticos */
  --frio:#3f6a84;   --frio-bg:#eaf2f8;
  --tibio:#8f6209;  --tibio-bg:#fbf3e0;
  --caliente:#a33327; --caliente-bg:#fbeae7;
  --alerta:#fdf6ec;

  /* Elevación: sombras largas y de alfa muy bajo. Sobre blanco puro, una
     sombra corta y densa se lee como suciedad; una larga y tenue se lee como
     profundidad. */
  --sombra-1:0 1px 2px rgba(10,51,72,.05);
  --sombra-2:0 6px 18px rgba(10,51,72,.07), 0 2px 5px rgba(10,51,72,.05);
  --sombra-3:0 18px 44px rgba(10,51,72,.11), 0 6px 14px rgba(10,51,72,.06);

  --radio:10px;
  --radio-s:7px;
  --radio-xs:5px;

  --display:"Inter Tight","Inter","Segoe UI",system-ui,sans-serif;
  --texto:"Inter","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  /* Ancho de la caja de contenido. Vive como variable porque la vitrina lo
     estira y el panel no. */
  --ancho:1240px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font:400 15px/1.6 var(--texto);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--acento); text-decoration:none}
a:hover{text-decoration:underline}

/* ─────────────────────────── Barra superior ───────────────────────────
   La barra es lo primero que aparece al entrar y lo único que acompaña al
   operador en todas las pantallas, así que se comporta como un objeto y no
   como un encabezado impreso: entra al cargar, se compacta al bajar y el
   indicador de sección viaja en vez de saltar.

   Todo el movimiento es `transform` y `opacity` —las dos propiedades que el
   navegador anima sin recalcular la maqueta— y todo queda anulado por la
   regla de `prefers-reduced-motion` del final del archivo. */

.barra{
  display:flex; align-items:center; gap:32px;
  padding:0 28px; min-height:62px;
  background:var(--tinta);
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.06), var(--sombra-2);
  transition:min-height .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease,
             background-color .3s ease;
  animation:asentar .5s cubic-bezier(.2,.7,.3,1);
}
@keyframes asentar{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}

/* Al bajar, la barra cede altura y se vuelve translúcida: el contenido pasa
   por debajo en vez de chocar contra una placa opaca, y el operador conserva
   la referencia de dónde está. Solo donde el desenfoque existe de verdad;
   sin él, una barra semitransparente sobre papel claro pierde el contraste
   del texto blanco. */
.barra.compacta{
  min-height:52px;
  box-shadow:0 1px 0 rgba(255,255,255,.09), var(--sombra-3);
}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .barra.compacta{
    background:rgba(10,51,72,.88);
    -webkit-backdrop-filter:blur(12px) saturate(150%);
    backdrop-filter:blur(12px) saturate(150%);
  }
}

.marca{display:flex; align-items:baseline; gap:11px}
/* ─── Páginas públicas: login, landing del comprador y del propietario ─── */
.caja{
  max-width:520px; margin:60px auto; background:var(--panel);
  border:1px solid var(--linea); border-radius:16px; padding:36px;
  box-shadow:var(--sombra-3);
  animation:surgir .5s cubic-bezier(.2,.7,.3,1);
}
.caja.ancha{max-width:640px}
.caja h1{font-size:26px; margin-bottom:8px; display:block}
.caja .campo input, .caja .campo textarea, .caja .campo select{width:100%}
.marca-publica{display:flex; align-items:baseline; gap:11px; margin-bottom:22px}
.fila{display:flex; gap:14px; flex-wrap:wrap}
.fila .campo{flex:1 1 150px}
.consentimiento{
  background:#f4f9fc; border:1px solid var(--linea); border-radius:var(--radio-s);
  padding:16px; font-size:13px; color:var(--tinta-2); margin-bottom:18px;
}
.consentimiento label{
  display:flex; gap:11px; align-items:flex-start; font-size:13px;
  font-weight:400; color:var(--tinta); margin:14px 0 0; text-transform:none; letter-spacing:0;
}
.consentimiento input[type=checkbox]{margin-top:3px; width:auto; flex:0 0 auto}

.barra nav{display:flex; gap:4px; margin-left:auto; position:relative}
.barra nav a{
  color:#a5c9da; font-size:14px; font-weight:500;
  padding:8px 13px; border-radius:var(--radio-xs);
  position:relative;
  transition:background .16s ease, color .16s ease,
             transform .18s cubic-bezier(.2,.7,.3,1);
}
/* Como en los botones: el hover solo donde hay puntero. En táctil se queda
   pegado después del toque y la sección parece seleccionada sin estarlo. */
@media (hover:hover){
  .barra nav a:hover{
    color:#fff; background:rgba(255,255,255,.08); text-decoration:none;
    transform:translateY(-1px);
  }
}
.barra nav a:active{transform:translateY(0)}
.barra nav a.activo{color:#fff; background:rgba(255,255,255,.14)}
/* Navegar con teclado tiene que verse tan claro como con el ratón: el panel
   maneja datos personales y se audita quién entró a qué. */
.barra nav a:focus-visible{
  outline:2px solid var(--acento-vivo); outline-offset:2px; color:#fff;
}

/* Indicador viajero: una sola pieza que se desplaza de una sección a otra en
   lugar de encenderse y apagarse en su sitio. El recorrido es la información
   —de dónde vengo, a dónde voy—, y es lo que convierte una lista de enlaces
   en una navegación.

   Lo coloca el script de `base.html`. Sin JavaScript se queda invisible y el
   fondo de `.activo` sigue marcando la sección: la barra nunca depende de él. */
/* `bottom:0` y no un valor negativo: en móvil la navegación es un carrusel con
   `overflow-x:auto`, y lo que sobresalga por abajo queda recortado o le añade
   scroll vertical a la barra. */
.barra nav .indicador{
  position:absolute; left:0; bottom:0; height:2px; width:0;
  border-radius:2px;
  background:linear-gradient(90deg, #1fd5ff, #ccf5ff);
  box-shadow:0 0 10px rgba(31,213,255,.5);
  opacity:0; pointer-events:none;
  transition:transform .34s cubic-bezier(.34,1.25,.4,1),
             width .34s cubic-bezier(.34,1.25,.4,1),
             opacity .2s ease;
}

.quien{
  font-size:13px; color:#8fb6c9;
  border-left:1px solid rgba(255,255,255,.13); padding-left:20px;
  display:flex; align-items:center; gap:12px;
}
.quien button, .quien .boton{padding:7px 13px; font-size:13px; font-weight:500}
@media (hover:hover){
  .quien button:hover, .quien .boton:hover{transform:translateY(-1px)}
}
/* Sin esto el botón se queda levantado mientras se pulsa: el hover es más
   específico que el `:active` general y le gana justo al hacer clic. */
.quien button:active, .quien .boton:active{transform:translateY(1px)}

/* Entrada escalonada: la barra se arma de izquierda a derecha, en el orden en
   que se lee. Dura medio segundo y no vuelve a ocurrir; es el saludo de la
   herramienta al abrirla, no un adorno permanente. */
.barra .marca, .barra nav a, .barra .quien{
  animation:asomar .45s cubic-bezier(.2,.7,.3,1) backwards;
}
.barra .marca{animation-delay:.05s}
.barra nav a:nth-child(1){animation-delay:.11s}
.barra nav a:nth-child(2){animation-delay:.15s}
.barra nav a:nth-child(3){animation-delay:.19s}
.barra nav a:nth-child(4){animation-delay:.23s}
.barra nav a:nth-child(5){animation-delay:.27s}
.barra nav a:nth-child(n+6){animation-delay:.31s}
.barra .quien{animation-delay:.36s}
@keyframes asomar{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ─────────────────────────── Estructura ─────────────────────────── */

main{max-width:1240px; margin:32px auto 0; padding:0 28px}

h1{
  font:600 30px/1.15 var(--display);
  letter-spacing:-.015em;
  margin:0 0 6px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
h2{font:600 19px/1.25 var(--display); letter-spacing:-.01em; margin:34px 0 14px}
.panel h2{font-size:17px}
.leyenda{color:var(--tinta-2); font-size:13.5px; margin:0 0 24px; max-width:76ch}

.panel{
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  padding:22px;
  margin-bottom:22px;
  box-shadow:var(--sombra-1);
}

/* ─────────────────────────── Cifras del tablero ─────────────────────────── */

.rejilla{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr));
  gap:14px; margin-bottom:28px;
}
.tarjeta{
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:17px 18px;
  box-shadow:var(--sombra-1);
  position:relative; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover{transform:translateY(-2px); box-shadow:var(--sombra-2)}
/* Filete superior: da jerarquía sin agregar peso visual. */
.tarjeta::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--acento), var(--acento-vivo));
  opacity:.28;
}
.tarjeta .cifra{
  font:600 31px/1.05 var(--display);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  margin-top:5px;
}
.tarjeta .rotulo{
  font-size:11px; color:var(--tinta-3); font-weight:600;
  text-transform:uppercase; letter-spacing:.09em;
}
/* La tarjeta de comisión es la única del tablero con una cifra de dinero, y
   eso la rompía por dos lados a la vez.
   1. Ancho: "$15.000.000" ocupa el triple que un "12", y el `overflow:hidden`
      que recorta el filete superior también recortaba el número por la
      derecha. Se ajusta al ancho real de la tarjeta con una consulta de
      contenedor, con un cuerpo fijo de respaldo donde no exista.
   2. Contraste: el verde claro del final del degradado dejaba el blanco en
      3,3:1 y el rótulo en 3,5:1 — por debajo del mínimo legible. El degradado
      se oscurece y el rótulo sube de opacidad. */
.tarjeta.destacada{
  background:linear-gradient(150deg, #072839, #0e6a94 55%, #1fa8d8);
  border-color:transparent;
}
.tarjeta.destacada::before{display:none}
.tarjeta.destacada .cifra{
  color:#fff; font-size:24px; white-space:nowrap;
}
.tarjeta.destacada .rotulo{color:rgba(255,255,255,.9)}
@supports (container-type:inline-size){
  .tarjeta.destacada{container-type:inline-size}
  /* 16cqi ≈ el cuerpo con el que doce dígitos con puntos llenan la tarjeta sin
     tocar los bordes. El tope la devuelve a la escala del resto del tablero
     cuando la tarjeta ocupa todo el ancho, en móvil. */
  .tarjeta.destacada .cifra{font-size:clamp(19px, 16cqi, 31px)}
}

.insignia{
  font-size:11px; font-weight:600; letter-spacing:.02em;
  padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.94); color:var(--tinta);
  box-shadow:var(--sombra-1); backdrop-filter:blur(4px);
}
.insignia.viva{background:var(--acento); color:#fff}
.insignia.aviso{background:var(--ladrillo); color:#fff}
.insignia.apagada{background:rgba(255,255,255,.9); color:var(--tinta-3)}

/* ─────────────────────────── Galería de la ficha ─────────────────────────── */

.galeria{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:11px; margin-bottom:4px;
}
.miniatura{
  position:relative; margin:0; aspect-ratio:4/3;
  border-radius:var(--radio-s); overflow:hidden;
  border:1px solid var(--linea); background:#eef5f9;
}
.miniatura img{width:100%; height:100%; object-fit:cover; display:block}
.miniatura .insignia{position:absolute; top:7px; left:7px; font-size:10px; padding:3px 8px}
.miniatura{cursor:grab}
.miniatura:active{cursor:grabbing}
.miniatura.arrastrando{opacity:.4; outline:2px dashed var(--acento); outline-offset:-2px}
/* Las acciones aparecen al pasar el cursor: en táctil siempre visibles, porque
   no hay hover y una foto sin forma de quitarla es una foto atrapada. */
.acciones-foto{
  position:absolute; top:7px; right:7px; display:flex; gap:5px;
  opacity:0; transition:opacity .15s ease;
}
.miniatura:hover .acciones-foto, .miniatura:focus-within .acciones-foto{opacity:1}
.miniatura button{
  padding:0; width:27px; height:27px; border-radius:50%;
  font-size:13px; line-height:1; display:grid; place-items:center;
}
@media (hover:none){.acciones-foto{opacity:1}}

.miniatura img.ampliar{cursor:zoom-in}

/* ─────────────────────────── Hilo de comentarios ─────────────────────────── */

.hilo{display:flex; flex-direction:column; gap:11px}
.comentario{
  background:#f4f9fc; border:1px solid var(--linea);
  border-left:3px solid var(--linea-fuerte);
  border-radius:0 var(--radio-s) var(--radio-s) 0; padding:12px 14px;
}
/* Las respuestas del operador se distinguen del comentario que las provocó. */
.comentario.respuesta{background:var(--acento-suave); border-left-color:var(--acento)}
.comentario header{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; color:var(--tinta-2); margin-bottom:6px;
}
.comentario header strong{color:var(--tinta); font-size:13.5px}
.comentario header time{font-family:var(--mono); font-size:11px; color:var(--tinta-3)}
.comentario header form{margin-left:auto}
.comentario header button{padding:2px 9px; font-size:11px; font-weight:500}
.comentario p{margin:0; font-size:14px; white-space:pre-wrap; line-height:1.55}

/* ─────────────────────────── Visor de fotos ─────────────────────────── */

.visor{
  position:fixed; inset:0; z-index:100;
  /* En móvil, `vh` y el `inset:0` miden el viewport de maquetación, que incluye
     la franja bajo la barra del navegador. Una foto vertical dimensionada contra
     ese alto queda parcialmente fuera de lo visible. `dvh` mide lo que de verdad
     se ve; el `vh` queda como respaldo para navegadores viejos. */
  height:100vh;
  height:100dvh;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,26,37,.95);
  /* El pie va absoluto abajo: se le reserva espacio en el relleno para que la
     imagen, que ahora puede ocupar todo el alto, no lo tape. */
  padding:clamp(12px, 4vw, 48px);
  padding-bottom:calc(clamp(12px, 4vw, 48px) + 26px);
  overflow:hidden;                 /* nada debe poder desbordar el visor */
  animation:aparecer .18s ease;
}
.visor[hidden]{display:none}
@keyframes aparecer{from{opacity:0} to{opacity:1}}

.visor img{
  /* `min-width`/`min-height` valen `auto` en los elementos flex, lo que impide
     que una imagen se encoja por debajo de su tamaño natural: con eso, los
     `max-*` de abajo quedaban anulados y una foto de 1600 px desbordaba la
     pantalla obligando a hacer scroll. Ponerlos en 0 los reactiva. */
  min-width:0; min-height:0;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain; border-radius:var(--radio-s);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:acercar .22s cubic-bezier(.2,.7,.3,1);
  /* Sin esto, arrastrar sobre la foto selecciona el pie o inicia el arrastre
     nativo de imagen del navegador, y el gesto se pierde. */
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
  touch-action:pan-y;              /* deja el gesto horizontal para nosotros */
}

/* El gesto se anuncia con el cursor; en táctil no se ve pero no molesta. */
.visor{cursor:grab}
.visor.arrastrando{cursor:grabbing}
.visor.arrastrando img{transition:none}
@keyframes acercar{from{transform:scale(.96); opacity:0} to{transform:none; opacity:1}}

.visor button{
  position:absolute; z-index:2;            /* siempre por encima de la imagen */
  background:rgba(10,51,72,.78); color:#fff;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%; display:grid; place-items:center; padding:0;
  backdrop-filter:blur(6px); box-shadow:0 4px 14px rgba(0,0,0,.4);
}
/* El `:hover` se queda pegado en táctil —no hay puntero que se retire— y deja
   el botón con fondo distinto después de tocarlo. Solo se aplica donde hay
   puntero real. */
@media (hover:hover){
  .visor button:hover{background:rgba(22,34,30,.95); border-color:rgba(255,255,255,.55)}
}
.visor button:focus-visible{outline:3px solid var(--acento-vivo); outline-offset:2px}
/* Reacción al toque, en lugar del recuadro gris del navegador. */
.visor button:active{background:rgba(8,38,54,.99); transform:scale(.94)}
.visor-cerrar{top:16px; right:16px; width:44px; height:44px; font-size:18px}
.visor-pie{
  position:absolute; bottom:18px; left:0; right:0; margin:0; text-align:center;
  color:rgba(255,255,255,.72); font-size:12.5px; letter-spacing:.02em;
}
@media (max-width:600px){
  .visor-cerrar{top:10px; right:10px; width:40px; height:40px}
}

input[type=file]{
  padding:9px 12px; background:#f7fbfd; border-style:dashed; cursor:pointer;
  font-size:13px;
}
input[type=file]:hover{border-color:var(--acento); background:var(--acento-suave)}

/* ─────────────────────────── Tablas ─────────────────────────── */

table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra-1);
}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--linea); font-size:14px; vertical-align:middle}
th{
  background:#edf4f8; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-2);
  white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:#f7fbfd}
.num{text-align:right; font-variant-numeric:tabular-nums}

/* ─────────────────────────── Señales ─────────────────────────── */

.chip{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
}
.chip.frio{background:var(--frio-bg); color:var(--frio)}
.chip.tibio{background:var(--tibio-bg); color:var(--tibio)}
.chip.caliente{background:var(--caliente-bg); color:var(--caliente)}

/* Estado de un canal de conversación. No reutiliza los chips de temperatura del
   prospecto: allí "caliente" es una buena noticia y aquí sería una alarma. */
.chip.conectado{background:#e4f1e9; color:#256b47}
.chip.caido{background:var(--caliente-bg); color:var(--caliente)}

/* ─── Filtros de la cartera ───
   Pastillas y no un <select>: el operador ve de un vistazo cuánto inventario
   tiene de cada tipo y municipio, que es media consulta ya respondida. */
/* Los grupos van uno seguido del otro, no apilados: cada uno ocupa lo que
   necesita y solo salta de línea cuando de verdad no cabe. En columna, tres
   grupos de tres pastillas empujaban el listado media pantalla hacia abajo. */
.filtros{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 26px; margin:18px 0 14px;
}
.filtro{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.filtro-titulo{
  font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--tinta-3);
  /* El ancho mínimo alineaba los rótulos cuando iban en columna; en fila solo
     abriría un hueco delante de cada uno. */
}
.pastilla{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px; text-decoration:none;
  font-size:13px; line-height:1.2; white-space:nowrap;
  border:1px solid var(--linea-fuerte); color:var(--tinta); background:var(--panel);
  transition:border-color .12s ease, background .12s ease;
}
.pastilla:hover{border-color:var(--ladrillo); background:var(--ladrillo-suave)}
.pastilla em{font-style:normal; font-size:11.5px; color:var(--tinta-3)}
.pastilla.activa{
  background:var(--ladrillo); border-color:var(--ladrillo); color:#fff; font-weight:600;
}
.pastilla.activa em{color:rgba(255,255,255,.75)}
/* En cero sigue siendo un enlace: se apaga para no competir con lo que sí
   tiene inventario, pero no se esconde ni se bloquea —el operador necesita
   ver que la opción existe y que la respuesta es "ninguno". */
.pastilla.vacia{color:var(--tinta-3); border-color:var(--linea)}
.pastilla.vacia.activa{color:#fff}

.estado{
  display:inline-block; padding:3px 10px; border-radius:var(--radio-xs);
  background:#e9f1f6; font-size:11.5px; font-weight:600; color:var(--tinta-2);
  letter-spacing:.01em;
}
.estado.disponible{background:var(--acento-suave); color:var(--acento)}
.estado.vendido,.estado.vendida{background:var(--acento); color:#fff}
.estado.perdido,.estado.inactiva,.estado.rechazada{background:#e7eef3; color:var(--tinta-3)}
.estado.visita,.estado.oferta,.estado.pendiente_validacion{background:var(--tibio-bg); color:var(--tibio)}

.barra-score{
  background:#e4edf2; border-radius:999px; height:6px; width:80px;
  display:inline-block; vertical-align:middle; overflow:hidden;
}
.barra-score span{display:block; height:100%; background:linear-gradient(90deg,var(--acento),var(--acento-vivo)); border-radius:999px}

/* ─────────────────────────── Avisos ─────────────────────────── */

.aviso-caja{
  border-left:3px solid var(--tibio); background:var(--alerta);
  padding:15px 18px; border-radius:0 var(--radio-s) var(--radio-s) 0;
  margin-bottom:22px;
}
.aviso-caja.ok{border-color:var(--acento); background:var(--acento-suave)}
.aviso-caja.error{border-color:var(--caliente); background:var(--caliente-bg)}
.aviso-caja h3{margin:0 0 7px; font:600 15px/1.3 var(--display)}
.aviso-caja p{margin:0; font-size:13.5px; color:var(--tinta-2)}
.aviso-caja ul{color:var(--tinta-2)}

/* ─────────────────────────── Formularios ─────────────────────────── */

form.linea{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
/* La celda de acciones de una tabla comparte el nombre pero no era flex: el
   <form> de «Marcar atendida» caía como bloque, pegado a «Ver conversación».
   Con gap propio los dos quedan separados y en línea. */
td.linea{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
td.linea form{margin:0}
label{display:block; font-size:11.5px; font-weight:600; color:var(--tinta-2); margin-bottom:5px; letter-spacing:.02em}
.campo{margin-bottom:16px}

input,select,textarea{
  padding:10px 12px; border:1px solid var(--linea-fuerte); border-radius:var(--radio-s);
  font:inherit; font-size:14px; background:#fff; color:var(--tinta);
  transition:border-color .15s ease, box-shadow .15s ease;
  /* Un <select> no encoge por debajo de su opción más larga, y las de
     «Confirmar venta» miden 46 caracteres: en un móvil eso ensancha la página
     entera. Con el tope, el control se ajusta y recorta el texto que muestra. */
  max-width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-suave);
}
input::placeholder,textarea::placeholder{color:var(--tinta-3)}
textarea{line-height:1.55}

button, .boton{
  padding:10px 18px; border:0; border-radius:var(--radio-s);
  background:var(--acento); color:#fff;
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  transition:background .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow:var(--sombra-1);
  /* Quita el recuadro gris que los navegadores móviles pintan al tocar. */
  -webkit-tap-highlight-color:transparent;
}
.boton{display:inline-block; text-decoration:none; line-height:1.5}
/* Los estados de hover solo donde hay puntero: en táctil se quedan pegados
   después del toque y el botón parece seleccionado. */
@media (hover:hover){
  button:hover, .boton:hover{background:#0a4f70; color:#fff; text-decoration:none; box-shadow:var(--sombra-2)}
  button.suave:hover, .boton.suave:hover{background:#dbe9f0; color:var(--tinta)}
  button.peligro:hover{background:#8e3823}
}
button:active, .boton:active{transform:translateY(1px)}
button.suave, .boton.suave{background:#e9f2f7; color:var(--tinta); box-shadow:none}
button.peligro{background:var(--ladrillo)}

/* ─────────────────────────── Composición ─────────────────────────── */

.dos-columnas{display:grid; grid-template-columns:1.45fr 1fr; gap:22px; align-items:start}
/* `min-width:auto` es el valor inicial de un elemento de grid o de flex: sin
   esto, un hijo ancho empuja la columna fuera del viewport en lugar de
   recortarse o hacer scroll dentro de lo suyo. */
.dos-columnas > *{min-width:0}
.panel{min-width:0}
form.linea > div{min-width:0}

.chat{
  max-height:65vh; overflow-y:auto; display:flex; flex-direction:column;
  gap:10px; padding-right:4px; min-width:0;
}
.chat.completo{max-height:none; overflow-y:visible}
.burbuja{
  padding:10px 14px; border-radius:14px; max-width:80%;
  font-size:14px; white-space:pre-wrap; line-height:1.5;
  box-shadow:var(--sombra-1);
  /* `pre-wrap` corta por espacios: una URL o un código largo se saldría del
     globo. Con esto se parte donde haga falta y el globo respeta su ancho. */
  overflow-wrap:anywhere;
}
.burbuja.entrante{background:#eef5f9; align-self:flex-start; border-bottom-left-radius:4px}
.burbuja.saliente{background:var(--acento-suave); align-self:flex-end; border-bottom-right-radius:4px}
.burbuja .ts{display:block; font-size:10.5px; color:var(--tinta-3); margin-top:5px; font-family:var(--mono)}

dl.ficha{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:0; font-size:14px}
dl.ficha dt{color:var(--tinta-2); font-size:12.5px; font-weight:600}
dl.ficha dd{margin:0; min-width:0}

/* Bloque de comandos. El único del panel son los del canal de WhatsApp, y no
   tenía ninguna regla: con el `white-space:pre` que trae el navegador de fábrica
   un `python -c "..."` de ochenta caracteres se salía de la tarjeta y arrastraba
   la página entera hacia los lados en un teléfono.

   La salida no es partirlos: un comando cortado a la mitad se copia mal y
   parece dos. Se desplaza dentro de su propia caja, que es lo que aísla el
   desbordamiento del resto de la maqueta. Fondo oscuro porque es lo que es —una
   terminal— y porque repite la tinta de la barra superior. */
pre{
  margin:14px 0; padding:14px 16px;
  background:#082a3c; color:#cfe6f0;
  border-radius:var(--radio-s);
  font:400 12.5px/1.65 var(--mono);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
pre code{
  background:none; padding:0; border-radius:0;
  color:inherit; font-size:inherit;
  /* Anula el corte de palabra del `code` suelto: aquí romper el comando es
     justo lo que se está evitando. */
  overflow-wrap:normal; word-break:normal;
}

code{
  font-family:var(--mono); font-size:12.5px; background:#edf4f8;
  padding:1px 6px; border-radius:4px;
  /* Las URL de los webhooks no tienen espacios donde cortar, así que sin esto
     se salen de la tarjeta en móvil en vez de seguir hacia abajo. */
  overflow-wrap:anywhere; word-break:break-word;
}
code.hash{font-size:11px; color:var(--tinta-3); background:none; padding:0}

footer{
  max-width:1240px; margin:44px auto 48px; padding:22px 28px 0;
  color:var(--tinta-2); font-size:12px; border-top:1px solid var(--linea);
}
footer .aviso{color:var(--tinta-3)}

/* ─────────────────────────── Entrada en escena ───────────────────────────
   Una sola orquestación al cargar. Escalonar las tarjetas da sensación de
   sistema construido; animar cada micro-elemento sería ruido. */

@keyframes surgir{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.rejilla > *, .rejilla-inmuebles > *{animation:surgir .42s cubic-bezier(.2,.7,.3,1) backwards}
.rejilla > *:nth-child(1),.rejilla-inmuebles > *:nth-child(1){animation-delay:.02s}
.rejilla > *:nth-child(2),.rejilla-inmuebles > *:nth-child(2){animation-delay:.06s}
.rejilla > *:nth-child(3),.rejilla-inmuebles > *:nth-child(3){animation-delay:.10s}
.rejilla > *:nth-child(4),.rejilla-inmuebles > *:nth-child(4){animation-delay:.14s}
.rejilla > *:nth-child(5),.rejilla-inmuebles > *:nth-child(5){animation-delay:.18s}
.rejilla > *:nth-child(6),.rejilla-inmuebles > *:nth-child(6){animation-delay:.22s}
.rejilla > *:nth-child(n+7),.rejilla-inmuebles > *:nth-child(n+7){animation-delay:.26s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .tarjeta-inmueble:hover .ti-foto img{transform:none}
}

/* ─────────────────────────── Adaptable ─────────────────────────── */

@media (max-width:980px){
  .dos-columnas{grid-template-columns:1fr}
}
@media (max-width:820px){
  .barra{flex-wrap:wrap; gap:12px; padding:12px 18px}
  .barra nav{margin-left:0; order:3; width:100%; overflow-x:auto; padding-bottom:2px}
  .quien{margin-left:auto; border-left:none; padding-left:0}
  main{padding:0 18px; margin-top:22px}
  h1{font-size:25px}
  table{display:block; overflow-x:auto; white-space:nowrap}
  td.linea{gap:16px; padding-right:4px}
  /* 22px de relleno a cada lado se comen un tercio del ancho útil de un
     teléfono. Con 14px queda el aire justo para el texto del panel. */
  .panel{padding:16px 14px}
  /* La conversación sangra fuera de ese relleno: los márgenes negativos lo
     cancelan y el chat ocupa el panel de borde a borde, a ras de donde termina
     el botón de la barra superior. Solo se conservan 4px a la derecha para que
     la barra de scroll no se monte sobre los globos. */
  .chat{margin-left:-14px; margin-right:-14px; padding-left:4px; padding-right:4px}
  /* Con más ancho disponible, el globo puede tomar más: sigue sin llegar al
     100% para que se note de un vistazo quién escribió cada mensaje. */
  .burbuja{max-width:88%}
  /* En una columna angosta, la rejilla etiqueta/valor deja al valor sin ancho
     útil. Apilados, la URL dispone de todo el ancho de la tarjeta. */
  dl.ficha{grid-template-columns:1fr; gap:3px}
  dl.ficha dd{margin-bottom:10px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Vitrina pública de Inmoclick (/inmuebles, /publicar, landing, login)
   ───────────────────────────────────────────────────────────────────────
   Portal, no panel. El dashboard optimiza densidad —caben más filas, se ve
   más de un vistazo—; aquí ocurre lo contrario: el visitante decide con la
   foto y el precio, así que la foto es grande, el precio es lo más pesado
   de la tarjeta y todo lo demás se pone en gris a su alrededor.

   Tres reglas que explican casi todo lo que sigue:
   · El cromo es blanco y las líneas son de un píxel. Nada de paneles con
     sombra dentro de otros paneles: el papel es el fondo y las secciones se
     separan con un filete, como en una revista.
   · Las etiquetas son versalitas espaciadas y de cuerpo pequeño; los datos
     son grandes. Es lo que hace que un listado se lea como catálogo y no
     como formulario.
   · La tarjeta entera es el enlace. Un portal se recorre a clic largo, no
     apuntando a un botón de noventa píxeles.
   ═══════════════════════════════════════════════════════════════════════ */

body.vitrina{background:var(--papel)}
body.vitrina main{max-width:var(--ancho); margin:0 auto; padding:0 32px 96px}

/* Texto solo para lectores de pantalla: el enlace que cubre la tarjeta no
   tiene contenido visible y sin esto se anunciaría como «enlace, en blanco». */
.oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ─────────────────────── Cabecera de la vitrina ───────────────────────
   La barra del panel es tinta sobre tinta porque es una herramienta. Aquí
   se invierte: blanca, con un solo filete abajo, para que la primera cosa
   con peso visual de la página sea una fotografía y no el menú. */

body.vitrina .barra{
  background:#fff; color:var(--tinta);
  min-height:76px; padding:0 32px; gap:40px;
  border-bottom:1px solid var(--linea);
  box-shadow:none;
}
body.vitrina .barra.compacta{
  min-height:64px;
  box-shadow:var(--sombra-2);
}
/* Gana al `@supports` de la barra oscura, que la teñía de verde translúcido. */
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  body.vitrina .barra.compacta{
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    backdrop-filter:blur(14px) saturate(160%);
  }
}

/* Logotipo de palabra. No hay isotipo a propósito: una sigla dibujada exige
   un archivo que mantener, y en este sector el nombre compuesto en versalitas
   espaciadas es el código visual que la gente ya lee como «inmobiliaria». */
.marca-inmoclick{
  font:600 19px/1 var(--display);
  letter-spacing:.17em; text-transform:uppercase;
  color:currentColor; white-space:nowrap;
}
/* El azul de marca (`--acento`) es casi tan oscuro como la tinta y las dos
   mitades del logotipo se confundirían. Este tono es el del tejado del
   isotipo aclarado lo justo para aguantar sobre papel: 3,8:1, que es lo que
   pide un texto de 19px en seminegra. */
.marca-inmoclick b{font-weight:600; color:var(--marca-acento, #0e8bbf)}
.marca-lema{
  font:500 9px/1 var(--texto); letter-spacing:.24em; text-transform:uppercase;
  color:var(--tinta-3);
}
/* Sobre la barra oscura del panel el petróleo desaparece: la mitad acentuada
   sube a un celeste que sí despega del fondo. */
.barra .marca-inmoclick{--marca-acento:#59e0ff}
.barra .marca-lema{color:#7aa9bd}
body.vitrina .barra .marca-inmoclick{--marca-acento:#0e8bbf; color:var(--tinta)}
body.vitrina .barra .marca-lema{color:var(--tinta-3)}
body.vitrina .barra .marca{
  flex-direction:column; align-items:flex-start; gap:4px; text-decoration:none;
}
body.vitrina .barra .marca:hover{text-decoration:none}

body.vitrina .barra nav{gap:2px; margin-left:auto}
body.vitrina .barra nav a{
  color:var(--tinta-2); background:none;
  font:600 11.5px/1 var(--texto); letter-spacing:.13em; text-transform:uppercase;
  padding:12px 14px; border-radius:0;
}
/* El subrayado crece desde el centro en vez de encenderse: es el mismo gesto
   del indicador viajero del panel, reducido a una sección. */
body.vitrina .barra nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px;
  background:var(--acento); transform:scaleX(0);
  transition:transform .2s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){
  body.vitrina .barra nav a:hover{
    color:var(--tinta); background:none; transform:none; text-decoration:none;
  }
}
body.vitrina .barra nav a:hover::after,
body.vitrina .barra nav a.activo::after{transform:scaleX(1)}
body.vitrina .barra nav a.activo{color:var(--tinta); background:none}
body.vitrina .barra nav .indicador{display:none}
body.vitrina .barra nav a:focus-visible{outline:2px solid var(--acento); outline-offset:-2px; color:var(--tinta)}

body.vitrina .quien{
  color:var(--tinta-2);
  border-left:1px solid var(--linea); padding-left:22px; gap:10px;
}
body.vitrina .quien .boton, body.vitrina .quien button{
  font:600 11px/1 var(--texto); letter-spacing:.11em; text-transform:uppercase;
  padding:12px 18px; border-radius:var(--radio-xs);
}
body.vitrina .quien .boton.suave, body.vitrina .quien button.suave{
  background:none; border:1px solid var(--linea-fuerte); color:var(--tinta-2);
}
@media (hover:hover){
  body.vitrina .quien .boton.suave:hover, body.vitrina .quien button.suave:hover{
    background:none; border-color:var(--tinta); color:var(--tinta);
  }
}
body.vitrina .quien .destacado{background:var(--tinta); color:#fff; border:1px solid var(--tinta)}
@media (hover:hover){
  body.vitrina .quien .destacado:hover{background:var(--acento); border-color:var(--acento); color:#fff}
}

/* Aviso de cartera falsa: ancho completo y ladrillo, para que sea imposible
   confundirlo con una promoción. */
.franja-demo{
  background:var(--ladrillo); color:#fff;
  padding:12px 32px; font-size:13.5px; text-align:center;
}
.franja-demo code{
  background:rgba(255,255,255,.2); padding:2px 7px; border-radius:4px;
  font:400 12px/1 var(--mono);
}

/* ─────────────────────────── Portada ─────────────────────────── */

.portada{padding:60px 0 34px}
.antetitulo{
  font:600 11px/1 var(--texto); letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-3); margin:0 0 20px;
}
.portada h1{
  display:block; margin:0 0 16px;
  font:600 clamp(34px, 5.2vw, 56px)/1.03 var(--display);
  letter-spacing:-.035em; max-width:16ch;
}
.portada .entradilla{
  margin:0; max-width:56ch; font-size:16.5px; line-height:1.65; color:var(--tinta-2);
}

/* Conmutador de negocio. Va suelto sobre la barra de filtros, como el
   «For Sale / For Rent» de los portales: es la decisión que cambia la escala
   de todo lo demás —un canon y un precio de venta no se comparan— y por eso
   no puede ser un desplegable más dentro de la fila. */
.segmentos{
  display:inline-flex; gap:2px; margin:34px 0 0; padding:4px;
  background:var(--velo); border-radius:999px;
}
.segmentos a{
  padding:10px 22px; border-radius:999px; color:var(--tinta-2);
  font:600 11.5px/1 var(--texto); letter-spacing:.11em; text-transform:uppercase;
  transition:background .16s ease, color .16s ease;
}
.segmentos a:hover{color:var(--tinta); text-decoration:none}
.segmentos a.activa{background:var(--tinta); color:#fff}
.segmentos a em{font-style:normal; font-size:11px; opacity:.55; margin-left:7px}

/* ─────────────────────── Barra de filtros ───────────────────────
   Una sola pieza con filetes internos, no ocho cajas sueltas. Es lo que hace
   que se lea como un instrumento de búsqueda y no como un formulario de alta:
   los controles pierden su borde propio y lo que los separa es la línea. */

.filtrador{
  display:flex; flex-wrap:wrap; align-items:stretch; margin:18px 0 0;
  background:#fff; border:1px solid var(--linea-fuerte);
  border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra-2);
}
/* `min-width:0` es lo que permite que las celdas encojan: sin él manda el
   ancho intrínseco del contenido y la fila se parte antes de tiempo. */
.filtrador .campo{
  flex:1 1 152px; min-width:0; margin:0; padding:13px 18px;
  border-right:1px solid var(--linea);
  display:flex; flex-direction:column; justify-content:center;
}
.filtrador .campo.ancho{flex:2.3 1 230px}
.filtrador .campo.estrecho{flex:.72 1 112px}
.filtrador .campo:focus-within{background:var(--acento-suave)}
.filtrador label{
  font:600 9.5px/1 var(--texto); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3); margin:0 0 7px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.filtrador input, .filtrador select{
  width:100%; border:0; padding:0; background:none; border-radius:0;
  font:500 14.5px/1.25 var(--texto); color:var(--tinta);
}
.filtrador input:focus, .filtrador select:focus{outline:none; box-shadow:none}
.filtrador select{cursor:pointer}
.filtrador .rango{display:flex; align-items:center; gap:8px}
.filtrador .rango input{min-width:0; font-variant-numeric:tabular-nums}
.filtrador .rango .guion{color:var(--linea-fuerte); flex:0 0 auto}
.filtrador .accion{flex:0 0 auto; padding:0; border-right:0}
.filtrador .accion button{
  height:100%; min-height:66px; border-radius:0; box-shadow:none;
  padding:0 34px; background:var(--tinta);
  font:600 11.5px/1 var(--texto); letter-spacing:.14em; text-transform:uppercase;
}
@media (hover:hover){
  .filtrador .accion button:hover{background:var(--acento); box-shadow:none}
}
.filtrador .accion button:active{transform:none}

/* ─────────────────────────── Resultados ─────────────────────────── */

.resultados-barra{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:46px 0 26px; padding-bottom:18px; border-bottom:1px solid var(--linea);
}
.resultados-barra h2{
  margin:0; font:600 23px/1.2 var(--display); letter-spacing:-.025em;
}
.resultados-barra .contexto{color:var(--tinta-2); font-size:14.5px}
.resultados-barra .limpiar{
  font:500 13px/1 var(--texto); color:var(--tinta-2);
  border-bottom:1px solid var(--linea-fuerte); padding-bottom:2px;
}
.resultados-barra .limpiar:hover{color:var(--tinta); border-color:var(--tinta); text-decoration:none}

.orden{display:flex; align-items:center; gap:4px; margin-left:auto; flex-wrap:wrap}
.orden .rotulo{
  font:600 9.5px/1 var(--texto); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3); margin-right:6px;
}
.orden a{
  padding:8px 13px; border-radius:999px; font-size:13px; color:var(--tinta-2);
  transition:background .15s ease, color .15s ease;
}
.orden a:hover{background:var(--velo); color:var(--tinta); text-decoration:none}
.orden a.activa{background:var(--tinta); color:#fff}

/* ─────────────────────── Tarjeta de inmueble ─────────────────────── */

.rejilla-inmuebles{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(312px, 1fr));
  gap:40px 28px;
}
.tarjeta-inmueble{position:relative; display:flex; flex-direction:column}
/* Todo lo que no sea el enlace de fondo necesita contexto propio para quedar
   por encima de él; si no, el enlace extendido los taparía. */
.tarjeta-inmueble > *:not(.ti-enlace){position:relative; z-index:1}
.ti-enlace{position:absolute; inset:0; z-index:2; border-radius:var(--radio)}

.ti-foto{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3; border-radius:var(--radio); background:var(--velo);
  transition:box-shadow .28s ease;
}
.ti-foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.tarjeta-inmueble:hover .ti-foto{box-shadow:var(--sombra-3)}
.tarjeta-inmueble:hover .ti-foto img{transform:scale(1.045)}
/* El velo inferior existe para el rótulo de zona: sin él, un texto blanco
   sobre una fachada clara se vuelve ilegible en una de cada tres fotos. */
.ti-foto::after{
  content:""; position:absolute; inset:auto 0 0; height:46%;
  background:linear-gradient(to top, rgba(6,30,43,.72), rgba(6,30,43,0));
  pointer-events:none;
}
.ti-zona{
  position:absolute; left:16px; right:16px; bottom:13px; z-index:1;
  color:#fff; font:600 12px/1.3 var(--texto); letter-spacing:.11em;
  text-transform:uppercase; text-shadow:0 1px 4px rgba(0,0,0,.35);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ti-marcas{
  position:absolute; top:13px; left:13px; right:13px; z-index:1;
  display:flex; gap:6px; flex-wrap:wrap;
}
.ti-marca{
  background:#fff; color:var(--tinta);
  font:700 9.5px/1 var(--texto); letter-spacing:.15em; text-transform:uppercase;
  padding:8px 11px; border-radius:3px; box-shadow:var(--sombra-1);
}
.ti-marca.oscura{background:var(--tinta); color:#fff}
.ti-marca.aviso{background:var(--ladrillo); color:#fff}

.ti-cuerpo{padding:18px 2px 0}
.ti-precio{
  font:700 25px/1.05 var(--display); letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
}
.ti-precio small{
  font:500 13px/1 var(--texto); color:var(--tinta-2);
  letter-spacing:0; margin-left:3px;
}
.ti-direccion{
  margin:10px 0 3px; font:500 15.5px/1.35 var(--texto); color:var(--tinta);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ti-ciudad{font-size:13.5px; color:var(--tinta-2)}
.ti-datos{
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  margin:13px 0 0; padding:0; list-style:none;
  font-size:13.5px; color:var(--tinta-2);
}
.ti-datos li + li::before{content:"·"; color:var(--tinta-3); margin:0 9px}
.ti-datos b{color:var(--tinta); font-weight:600; font-variant-numeric:tabular-nums}
.ti-pie{
  display:flex; align-items:center; gap:12px;
  margin-top:15px; padding-top:13px; border-top:1px solid var(--linea);
  font-size:12.5px; color:var(--tinta-2);
}
.ti-tipo{letter-spacing:.1em; text-transform:uppercase; font-weight:600; font-size:10.5px}
.ti-codigo{
  margin-left:auto; font:400 11px/1 var(--mono);
  letter-spacing:.04em; color:var(--tinta-3);
}
/* El código con sesión es un enlace de verdad a la ficha interna: tiene que
   quedar por encima del enlace que cubre la tarjeta. */
.ti-codigo.interno{position:relative; z-index:3; color:var(--acento)}
.ti-codigo.interno:hover{text-decoration:underline}
/* El foco vive en el enlace invisible, así que hay que devolverlo a la foto o
   quien navega con teclado no ve dónde está. */
.tarjeta-inmueble:focus-within .ti-foto{outline:2px solid var(--acento); outline-offset:3px}
.ti-enlace:focus-visible{outline:none}

.paginacion{display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin:64px 0 0}
.paginacion a{
  min-width:42px; height:42px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linea); border-radius:var(--radio-xs);
  font:500 13.5px/1 var(--texto); color:var(--tinta-2);
  font-variant-numeric:tabular-nums;
}
.paginacion a:hover{border-color:var(--tinta); color:var(--tinta); text-decoration:none}
.paginacion a.activa{background:var(--tinta); border-color:var(--tinta); color:#fff}

/* Vacío. Es una página de resultados que no puede desaparecer: si no explica
   por qué no hay nada, se lee como que la inmobiliaria no tiene inventario. */
.sin-resultados{
  border:1px dashed var(--linea-fuerte); border-radius:var(--radio);
  padding:56px 32px; text-align:center; background:var(--velo);
}
.sin-resultados h3{font:600 22px/1.2 var(--display); letter-spacing:-.02em; margin:0 0 10px}
.sin-resultados p{margin:0 auto 8px; max-width:52ch; color:var(--tinta-2); font-size:15px}

/* ═══════════════════════ Ficha del inmueble ═══════════════════════ */

.miga{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin:26px 0 24px;
  font:600 11px/1 var(--texto); letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-3);
}
.miga a{color:var(--tinta-3)}
.miga a:hover{color:var(--tinta); text-decoration:none}
.miga .sep{color:var(--linea-fuerte)}

/* Mosaico de apertura. La foto principal ocupa la mitad izquierda y las
   demás se reparten la derecha: es la composición que usan los portales
   porque dice «hay más» sin necesidad de una tira de miniaturas, y porque
   una sola foto panorámica desperdicia el resto del carrete. */
.mosaico{
  position:relative; display:grid; gap:8px;
  grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2, 1fr);
  aspect-ratio:16/9; border-radius:var(--radio); overflow:hidden;
  background:var(--velo);
}
.mosaico .pieza{position:relative; display:block; overflow:hidden; background:var(--velo)}
.mosaico .pieza:first-child{grid-row:span 2}
.mosaico .pieza img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
}
@media (hover:hover){
  .mosaico .pieza:hover img{transform:scale(1.05); opacity:.93}
}
.mosaico .pieza:focus-visible{outline:3px solid var(--acento); outline-offset:-3px}
/* Con pocas fotos el mosaico de cinco deja huecos: cada variante recompone la
   rejilla para que no quede ninguna celda vacía. */
.mosaico.fotos-1{grid-template-columns:1fr; grid-template-rows:1fr}
.mosaico.fotos-1 .pieza:first-child{grid-row:auto}
.mosaico.fotos-2{grid-template-columns:1fr 1fr; grid-template-rows:1fr}
.mosaico.fotos-2 .pieza:first-child{grid-row:auto}
.mosaico.fotos-3{grid-template-columns:2fr 1fr}
.mosaico.sin-foto{aspect-ratio:16/7; background:var(--acento-suave); place-items:center}
.mosaico.sin-foto img{object-fit:contain; padding:5%; width:auto; max-height:100%}
.ver-fotos{
  position:absolute; right:16px; bottom:16px; z-index:2;
  background:#fff; color:var(--tinta); border:1px solid var(--linea-fuerte);
  padding:11px 18px; border-radius:var(--radio-xs); box-shadow:var(--sombra-2);
  font:600 11px/1 var(--texto); letter-spacing:.13em; text-transform:uppercase;
}
@media (hover:hover){
  .ver-fotos:hover{background:var(--tinta); color:#fff; border-color:var(--tinta)}
}

.ficha-encabezado{
  display:flex; flex-wrap:wrap; gap:22px 48px; align-items:flex-end;
  margin:34px 0 0;
}
.ficha-encabezado .identidad{flex:1 1 400px; min-width:0}
.ficha-negocio{
  display:inline-block; background:var(--tinta); color:#fff;
  font:700 9.5px/1 var(--texto); letter-spacing:.17em; text-transform:uppercase;
  padding:8px 12px; border-radius:3px; margin-bottom:16px;
}
.ficha-negocio.demo{background:var(--ladrillo)}
.titulo-ficha{
  display:block; margin:0;
  font:600 clamp(27px, 3.7vw, 41px)/1.08 var(--display); letter-spacing:-.035em;
}
.ficha-lugar{margin:12px 0 0; color:var(--tinta-2); font-size:15.5px}
.ficha-encabezado .valor{flex:0 1 auto; text-align:right; margin-left:auto}
.ficha-encabezado .rotulo{
  font:600 9.5px/1 var(--texto); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3);
}
.precio-grande{
  margin:10px 0 0; font-variant-numeric:tabular-nums;
  font:700 clamp(30px, 4.2vw, 43px)/1 var(--display); letter-spacing:-.035em;
}
.precio-grande small{font:500 16px/1 var(--texto); color:var(--tinta-2); letter-spacing:0}
.por-m2{margin:9px 0 0; font-size:13.5px; color:var(--tinta-2); font-variant-numeric:tabular-nums}

/* Cifras clave: la fila que el comprador mira antes que la descripción. */
.cifras-clave{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  margin:30px 0 0; background:#fff;
  border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;
}
.cifras-clave > div{padding:19px 22px; border-right:1px solid var(--linea)}
.cifras-clave > div:last-child{border-right:0}
.cifras-clave .rotulo{
  display:block;
  font:600 9.5px/1 var(--texto); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3);
}
.cifras-clave .dato{
  display:block; margin-top:9px; font-variant-numeric:tabular-nums;
  font:600 20px/1.1 var(--display); letter-spacing:-.02em;
}

.compartir{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:26px 0 0}
.compartir .rotulo{
  font:600 9.5px/1 var(--texto); letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3); margin-right:4px;
}
.compartir a, .compartir button{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1px solid var(--linea); color:var(--tinta-2);
  padding:9px 15px; border-radius:999px; box-shadow:none;
  font:500 12.5px/1 var(--texto);
}
@media (hover:hover){
  .compartir a:hover, .compartir button:hover{
    background:none; border-color:var(--tinta); color:var(--tinta); text-decoration:none;
  }
}
.compartir button:active{transform:none}

.ficha-publica{
  display:grid; gap:56px; align-items:start; margin:52px 0 0;
  grid-template-columns:minmax(0, 1.85fr) minmax(320px, 1fr);
}
.ficha-principal{display:flex; flex-direction:column; gap:46px; min-width:0}
.ficha-lateral{display:flex; flex-direction:column; gap:18px; position:sticky; top:98px}

/* Secciones del cuerpo. No son tarjetas: un filete y una versalita bastan
   para separarlas, y así la página no se convierte en cajas dentro de cajas. */
.bloque > h2{
  margin:0 0 22px; padding-bottom:15px; border-bottom:1px solid var(--linea);
  font:600 11.5px/1 var(--texto); letter-spacing:.17em; text-transform:uppercase;
  color:var(--tinta-3);
}
.bloque .cuerpo-texto{
  margin:0; font-size:15.5px; line-height:1.8; color:var(--tinta-2);
  white-space:pre-wrap; max-width:72ch;
}

.info-clave{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(268px, 1fr));
  gap:0 52px; margin:0;
}
.info-clave > div{
  display:flex; justify-content:space-between; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--linea);
}
.info-clave dt{color:var(--tinta-2); font-size:14px}
.info-clave dd{
  margin:0; font-weight:600; font-size:14px; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Columna de conversión. Es lo único de la ficha que sí es una tarjeta: tiene
   que despegarse del papel porque es la acción, no el contenido. */
.tarjeta-asesor{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 24px; box-shadow:var(--sombra-2);
}
.tarjeta-asesor h2{margin:0 0 8px; font:600 19px/1.25 var(--display); letter-spacing:-.02em}
.asesor-cabeza{
  display:flex; align-items:center; gap:14px;
  padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--linea);
}
.asesor-avatar{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  background:var(--tinta); color:#fff; display:grid; place-items:center;
  font:600 16px/1 var(--display); letter-spacing:.04em;
}
.asesor-nombre{font-weight:600; font-size:15px}
.asesor-rol{font-size:12.5px; color:var(--tinta-2); margin-top:2px}
.tarjeta-asesor .campo{margin-bottom:14px}
.tarjeta-asesor input, .tarjeta-asesor textarea{width:100%}
.tarjeta-asesor .principal{
  width:100%; padding:14px; background:var(--tinta);
  font:600 12px/1 var(--texto); letter-spacing:.13em; text-transform:uppercase;
}
@media (hover:hover){
  .tarjeta-asesor .principal:hover{background:var(--acento)}
}
.boton-wasap{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:10px; padding:13px;
  background:none; border:1px solid var(--linea-fuerte); color:var(--tinta);
  border-radius:var(--radio-s); box-shadow:none;
  font:600 12px/1 var(--texto); letter-spacing:.11em; text-transform:uppercase;
}
@media (hover:hover){
  .boton-wasap:hover{background:none; border-color:#25d366; color:#128c4b; text-decoration:none}
}
.tarjeta-asesor .consentimiento{margin-bottom:16px}

.tambien{margin:84px 0 0; padding-top:46px; border-top:1px solid var(--linea)}
.tambien h2{margin:0 0 28px; font:600 26px/1.15 var(--display); letter-spacing:-.028em}

/* ─────────────────────── Visor a pantalla completa ───────────────────────
   Se abre desde el mosaico y sustituye a la tira de miniaturas: en un portal
   la galería es una pantalla, no un widget dentro del texto. Sin JavaScript
   nunca aparece y cada pieza del mosaico sigue siendo un enlace a su imagen. */

.lightbox{
  position:fixed; inset:0; z-index:200;
  display:grid; grid-template-rows:auto minmax(0, 1fr) auto;
  background:rgba(5,26,37,.97); animation:aparecer .18s ease;
}
.lightbox[hidden]{display:none}
.lightbox-cabeza{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; color:#bcd8e4; font:500 13px/1 var(--texto);
}
.lightbox-cabeza .contador{font-variant-numeric:tabular-nums; letter-spacing:.06em}
.lightbox-cerrar{
  width:42px; height:42px; padding:0; border-radius:50%; box-shadow:none;
  background:rgba(255,255,255,.1); color:#fff; font-size:19px; line-height:1;
}
.lightbox-lienzo{position:relative; display:grid; place-items:center; padding:0 22px; min-height:0}
.lightbox-lienzo img{max-width:100%; max-height:100%; object-fit:contain; border-radius:4px}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; padding:0; border-radius:50%; box-shadow:none;
  background:rgba(255,255,255,.1); color:#fff;
  font:400 26px/1 var(--texto);
}
.lightbox-nav.anterior{left:16px}
.lightbox-nav.siguiente{right:16px}
@media (hover:hover){
  .lightbox-nav:hover, .lightbox-cerrar:hover{background:rgba(255,255,255,.22)}
}
.lightbox-nav:active{transform:translateY(-50%) scale(.94)}
.lightbox-cerrar:active{transform:scale(.94)}
/* En táctil el gesto de arrastrar ya pasa de foto y dos botones grandes tapan
   justo lo que se ha venido a ver. */
@media (pointer:coarse), (max-width:640px){
  .lightbox-nav{display:none}
}
.lightbox-tira{display:flex; gap:8px; overflow-x:auto; padding:16px 22px; scrollbar-width:thin}
.lightbox-tira::-webkit-scrollbar{height:6px}
.lightbox-tira::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24); border-radius:999px}
.lightbox-tira button{
  flex:0 0 88px; height:60px; padding:0; border-radius:4px; overflow:hidden;
  border:2px solid transparent; background:none; box-shadow:none;
  opacity:.48; transition:opacity .15s ease, border-color .15s ease;
}
.lightbox-tira button img{width:100%; height:100%; object-fit:cover; display:block}
.lightbox-tira button:hover{opacity:.85; background:none}
.lightbox-tira button.activa{opacity:1; border-color:#fff}
body.sin-scroll{overflow:hidden}

/* ─────────────────────────── Pie público ───────────────────────────
   Tinta a sangre. Cierra la página con el mismo peso con que la abre la
   primera fotografía, y separa lo comercial de lo legal. */

.pie-publico{
  max-width:none; margin:0; padding:66px 32px 34px;
  background:var(--tinta); color:#9fc4d6; border-top:0;
}
.pie-columnas{
  max-width:var(--ancho); margin:0 auto;
  display:grid; gap:44px; grid-template-columns:1.5fr 1fr 1fr;
}
.pie-marca{
  display:block; margin:0 0 16px; color:#fff;
  font:600 19px/1 var(--display); letter-spacing:.17em; text-transform:uppercase;
}
.pie-marca b{font-weight:600; color:#59e0ff}
.pie-publico h3{
  margin:0 0 16px;
  font:600 10px/1 var(--texto); letter-spacing:.19em; text-transform:uppercase;
  color:#6f9cb0;
}
.pie-publico .leyenda{color:#9fc4d6; font-size:13.5px; line-height:1.7; max-width:44ch}
.pie-publico a{color:#dcf0f8; text-decoration:underline; text-underline-offset:3px}
.pie-publico a:hover{color:#fff}
.pie-publico .boton{
  background:#fff; color:var(--tinta); text-decoration:none; box-shadow:none;
  font:600 11px/1 var(--texto); letter-spacing:.12em; text-transform:uppercase;
  padding:13px 20px;
}
@media (hover:hover){
  .pie-publico .boton:hover{background:#59e0ff; color:var(--tinta)}
}
.pie-publico .aviso{
  max-width:var(--ancho); margin:46px auto 0; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#6b93a6; font-size:12.5px; line-height:1.7;
}

/* Botón flotante de WhatsApp. Es el patrón que el comprador colombiano ya
   reconoce en cualquier sitio inmobiliario; discutirlo sería terquedad. */
.wasap{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:#25d366; color:#fff; box-shadow:var(--sombra-3);
  transition:transform .18s cubic-bezier(.2,.7,.3,1);
}
.wasap:hover{transform:scale(1.07); text-decoration:none}

/* ─────────────────── Andamiaje del operador ───────────────────
   Solo lo ve quien tiene sesión. Se distingue del contenido público a
   propósito: el punteado dice «esto no es la oferta» mucho mejor que el
   contraste bruto, y así los botones siguen viéndose sobre su fondo. */

.barra-interna{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--velo); color:var(--tinta-2);
  border:1px dashed var(--linea-fuerte); border-left:3px solid var(--tinta);
  padding:11px 16px; border-radius:var(--radio-s); margin:20px 0 0;
  font-size:13px;
}
.barra-interna strong{color:var(--tinta); font-weight:600}
.barra-interna > span:first-child{margin-right:auto}
.barra-interna form{display:inline}
.hilo-interno{
  margin-top:56px; border:1px solid var(--linea); border-left:3px solid var(--tinta);
  background:var(--velo); border-radius:var(--radio-s); padding:24px;
}
.hilo-interno h2{margin:0 0 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.quien-soy{display:inline-flex; align-items:center; gap:8px; font-size:13px}

/* Salidas de las pantallas de confirmación: son lo único que queda por hacer
   en esa página, así que van juntas y con aire por encima. */
.salidas{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:28px; padding-top:24px; border-top:1px solid var(--linea);
}

/* ───────────── Páginas de una sola caja (landing, login, publicar) ───────────── */

body.publica{background:var(--velo)}
.caja{box-shadow:var(--sombra-3); border-radius:var(--radio)}
.caja h1{display:block; font:600 27px/1.2 var(--display); letter-spacing:-.025em}
.marca-publica{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:26px}
.marca-publica .marca-inmoclick{color:var(--tinta)}

/* ─────────────────────────── Adaptable ─────────────────────────── */

@media (max-width:1000px){
  .ficha-publica{grid-template-columns:1fr; gap:40px}
  .ficha-lateral{position:static}
  .pie-columnas{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body.vitrina main{padding:0 18px 72px}
  body.vitrina .barra{padding:12px 18px; min-height:0}
  body.vitrina .barra nav{order:3; width:100%; margin-left:0; overflow-x:auto}
  body.vitrina .quien{border-left:0; padding-left:0}
  .franja-demo{padding:11px 18px}
  .portada{padding:36px 0 26px}
  /* El botón deja de ser una columna de la fila y pasa a ocupar su propio
     renglón: a 360px de ancho, «Buscar» al lado de «Baños» deja a los dos
     controles sin espacio para su etiqueta. */
  .filtrador .campo{flex:1 1 46%; border-right:0; border-bottom:1px solid var(--linea)}
  .filtrador .accion{flex:1 1 100%}
  .filtrador .accion button{width:100%; min-height:56px}
  .rejilla-inmuebles{grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:30px 20px}
  /* Cinco fotos en un teléfono son cinco sellos ilegibles: se muestra la
     principal y el botón se encarga de decir cuántas hay detrás. */
  .mosaico{grid-template-columns:1fr; grid-template-rows:1fr; aspect-ratio:4/3}
  .mosaico .pieza{display:none}
  .mosaico .pieza:first-child{display:block; grid-row:auto}
  .ficha-encabezado .valor{text-align:left; margin-left:0}
  .cifras-clave > div{padding:15px 16px}
  .pie-publico{padding:48px 18px 28px}
  .pie-columnas{grid-template-columns:1fr; gap:34px}
  .tambien{margin-top:60px}
}