/* ══════════════════════════════════════════════════════════════════════
   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}
}

/* ══════════════════════════════════════════════════════════════════════
   Portada pública (`/`)
   ══════════════════════════════════════════════════════════════════════
   La vitrina es un instrumento de búsqueda: papel blanco, cromo retirado,
   la foto mandando. La portada tiene otro trabajo —contarle a alguien que
   no sabe quiénes somos qué es esto— y por eso empieza al revés: una lámina
   a sangre, la cabecera flotando encima sin fondo y el titular sobre la
   imagen. A partir de la primera pantalla vuelve a ser el sistema de
   siempre.

   Todo lo de aquí cuelga de `body.inicio`, que solo pone `inicio.html`.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Lockup de marca ───
   El isotipo delante y las dos líneas de texto en columna, como el escudo de
   una firma de servicios. La torre del isotipo se pinta con `currentColor`,
   así que el dibujo es uno solo y se tiñe según dónde esté. */
.isotipo{display:block; flex:0 0 auto}
.marca-texto{display:flex; flex-direction:column; gap:4px; min-width:0}
.marca{align-items:center}
body.vitrina .barra .marca{flex-direction:row; align-items:center; gap:12px}
.pie-marca{display:flex; align-items:center; gap:11px}

/* ─── Cabecera flotante ───
   Fija y no pegajosa: la lámina arranca en el píxel cero y la barra tiene que
   pisarla, no empujarla hacia abajo. El cambio de color lo dispara `.compacta`,
   que es la misma clase que ya compacta la barra al bajar en la vitrina. */
body.inicio .barra{
  position:fixed; left:0; right:0; top:0;
  background:transparent; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow:none;
  transition:min-height .3s cubic-bezier(.2,.7,.3,1), background-color .3s ease,
             color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
body.inicio main{max-width:none; margin:0; padding:0}
body.inicio .barra .marca-inmoclick{--marca-acento:#7fe8ff; color:#fff}
body.inicio .barra .marca-lema{color:rgba(255,255,255,.6)}
body.inicio .barra nav a{color:rgba(255,255,255,.8)}
body.inicio .barra nav a::after{background:#7fe8ff}
body.inicio .barra nav a.activo{color:#fff}
body.inicio .quien{border-left-color:rgba(255,255,255,.2)}
body.inicio .quien .quien-soy{color:rgba(255,255,255,.8)}
body.inicio .quien .boton.suave, body.inicio .quien button.suave{
  background:none; border-color:rgba(255,255,255,.35); color:#fff;
}
body.inicio .quien .destacado{background:#fff; color:var(--tinta); border-color:#fff}
@media (hover:hover){
  body.inicio .barra nav a:hover{color:#fff}
  body.inicio .quien .boton.suave:hover, body.inicio .quien button.suave:hover{
    background:rgba(255,255,255,.14); border-color:#fff; color:#fff;
  }
  body.inicio .quien .destacado:hover{background:var(--acento-vivo); color:var(--tinta)}
}
/* Fuera de la lámina vuelve a ser papel. El fondo no se declara aquí a
   propósito: lo pone la regla de la vitrina —blanco, y translúcido donde el
   desenfoque existe de verdad— y repetirlo aquí la anularía. */
body.inicio .barra.compacta{color:var(--tinta); border-bottom-color:var(--linea)}
body.inicio .barra.compacta .marca-inmoclick{--marca-acento:#0e8bbf; color:var(--tinta)}
body.inicio .barra.compacta .marca-lema{color:var(--tinta-3)}
body.inicio .barra.compacta nav a{color:var(--tinta-2)}
body.inicio .barra.compacta nav a::after{background:var(--acento)}
body.inicio .barra.compacta nav a.activo{color:var(--tinta)}
body.inicio .barra.compacta .quien{border-left-color:var(--linea)}
body.inicio .barra.compacta .quien .quien-soy{color:var(--tinta-2)}
body.inicio .barra.compacta .quien .boton.suave,
body.inicio .barra.compacta .quien button.suave{
  border-color:var(--linea-fuerte); color:var(--tinta-2);
}
body.inicio .barra.compacta .quien .destacado{
  background:var(--tinta); color:#fff; border-color:var(--tinta);
}
@media (hover:hover){
  body.inicio .barra.compacta nav a:hover{color:var(--tinta)}
  body.inicio .barra.compacta .quien .boton.suave:hover,
  body.inicio .barra.compacta .quien button.suave:hover{
    background:none; border-color:var(--tinta); color:var(--tinta);
  }
  body.inicio .barra.compacta .quien .destacado:hover{
    background:var(--acento); border-color:var(--acento); color:#fff;
  }
}
/* Con la franja de demostración puesta, la barra fija le taparía el texto: se
   aparta ella misma en vez de mover la lámina. */
body.inicio .franja-demo{padding-top:92px}

/* ─── Caja de contenido ───
   La portada va a sangre, así que el ancho no lo pone `main` sino cada bloque.
   Es lo que permite que una banda de color ocupe todo el ancho del navegador
   con su texto alineado con el del resto de la página. */
.contenedor{max-width:var(--ancho); margin:0 auto; padding:0 32px}

/* ─── Lámina del titular ─── */
.cima{
  position:relative; overflow:hidden; background:var(--tinta);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:min(94vh, 920px);
}
.cima-lamina{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 62%;
}
/* Dos degradados y no uno: el vertical asienta el texto sobre el cielo y deja
   el pie oscuro para las cifras; el horizontal protege la columna izquierda,
   que es donde cae el titular, sin apagar la torre de la derecha —que es lo
   único que hace que la lámina se lea como una vista y no como un fondo—. */
.cima-velo{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,16,26,.78) 0%, rgba(3,16,26,.34) 32%,
                    rgba(3,16,26,.58) 72%, rgba(3,16,26,.94) 100%),
    linear-gradient(96deg, rgba(3,16,26,.72) 0%, rgba(3,16,26,.24) 54%, transparent 88%);
}
.cima-cuerpo{position:relative; margin-top:auto; padding:176px 32px 46px; color:#fff}
.cima .antetitulo{color:#7fe8ff; margin:0 0 18px}
.cima h1{
  display:block; margin:0 0 22px; color:#fff; max-width:19ch;
  font:600 clamp(36px, 5.4vw, 62px)/1.05 var(--display);
  letter-spacing:-.038em;
  text-shadow:0 2px 34px rgba(3,16,26,.45);
}
.cima .entradilla{
  margin:0; max-width:58ch; font-size:16.5px; line-height:1.7;
  color:rgba(255,255,255,.84);
}
.cima-acciones{margin:38px 0 0}
.cima-acciones .destacado{
  background:#fff; color:var(--tinta); box-shadow:var(--sombra-3);
  font:600 11.5px/1 var(--texto); letter-spacing:.13em; text-transform:uppercase;
  padding:17px 28px;
}
@media (hover:hover){
  .cima-acciones .destacado:hover{background:var(--acento-vivo); color:var(--tinta)}
}

/* ─── Buscador de la portada ───
   Papel opaco sobre la lámina, no vidrio esmerilado: el desenfoque no existe
   en todos los navegadores y, donde no existe, el respaldo deja los rótulos
   flotando sobre la imagen. Una sola pieza con filetes internos, como la fila
   de filtros de la vitrina. */
.buscador{
  display:flex; flex-wrap:wrap; align-items:stretch; margin:38px 0 0;
  max-width:940px; background:#fff;
  border-radius:var(--radio); overflow:hidden;
  box-shadow:0 26px 60px rgba(3,16,26,.42);
}
.buscador .campo{
  flex:1 1 168px; min-width:0; margin:0; padding:15px 20px;
  border-right:1px solid var(--linea);
  display:flex; flex-direction:column; justify-content:center;
}
.buscador .campo.ancho{flex:1.9 1 240px}
.buscador .campo:focus-within{background:var(--acento-suave)}
.buscador 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;
}
.buscador input, .buscador select{
  width:100%; border:0; padding:0; background:none; border-radius:0;
  font:500 15px/1.25 var(--texto); color:var(--tinta);
}
.buscador input:focus, .buscador select:focus{outline:none; box-shadow:none}
.buscador select{cursor:pointer}
.buscador .accion{flex:0 0 auto; padding:0; border-right:0}
.buscador .accion button{
  height:100%; min-height:72px; border-radius:0; box-shadow:none;
  padding:0 38px; background:var(--tinta);
  font:600 11.5px/1 var(--texto); letter-spacing:.14em; text-transform:uppercase;
}
@media (hover:hover){
  .buscador .accion button:hover{background:var(--acento); box-shadow:none}
}
.buscador .accion button:active{transform:none}

/* ─── Cifras al pie de la lámina ───
   Van dentro de la portada y no en una banda propia: son el pie de foto del
   titular, no una sección. Todas salen de la cartera o de la configuración;
   ninguna es un número redondo de folleto. */
.cifras-cima{position:relative; display:grid; grid-template-columns:repeat(4, 1fr)}
.cifras-cima > div{padding:24px 26px 34px 0; border-top:1px solid rgba(255,255,255,.18)}
.cifras-cima b{
  display:block; margin-bottom:8px; color:#fff;
  font:600 clamp(26px, 2.6vw, 34px)/1 var(--display); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.cifras-cima span{
  display:block; max-width:25ch; color:rgba(255,255,255,.62);
  font-size:12.5px; line-height:1.55;
}

/* ─── Secciones del cuerpo ─── */
.seccion{padding:88px 32px}
/* Banda de reposo a sangre: separa dos secciones sin dibujar una caja. */
.banda-velo{
  background:var(--velo);
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
.seccion-cabeza{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; flex-wrap:wrap;
  margin:0 0 38px; padding-bottom:20px; border-bottom:1px solid var(--linea);
}
.seccion-cabeza .antetitulo{margin:0 0 12px}
.seccion-cabeza h2{
  margin:0; font:600 clamp(25px, 3vw, 36px)/1.12 var(--display); letter-spacing:-.032em;
}
.seccion-nota{color:var(--tinta-2); font-size:13.5px; line-height:1.6; max-width:46ch}
.enlace-mas{
  font:600 11.5px/1 var(--texto); letter-spacing:.13em; text-transform:uppercase;
  color:var(--acento); white-space:nowrap;
}
.enlace-mas:hover{color:var(--tinta); text-decoration:none}

/* ─── Zonas ───
   Mosaico de accesos por municipio. La lámina no retrata el municipio —no
   tenemos una fotografía de cada uno— sino el tipo de sitio; el nombre y el
   conteo son lo que informa, y eso sí sale de la cartera. */
.rejilla-zonas{display:grid; grid-template-columns:repeat(auto-fill, minmax(248px, 1fr)); gap:20px}
.zona{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radio); aspect-ratio:4/3;
  background:var(--tinta); box-shadow:var(--sombra-2);
}
.zona img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.zona::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,18,27,0) 34%, rgba(4,18,27,.88) 100%);
}
.zona-pie{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:20px; color:#fff}
.zona-nombre{display:block; font:600 19px/1.2 var(--display); letter-spacing:-.022em}
.zona-dato{display:block; margin-top:5px; font-size:12.5px; color:rgba(255,255,255,.74)}
@media (hover:hover){
  .zona:hover{text-decoration:none}
  .zona:hover img{transform:scale(1.06)}
}

/* ─── Por qué ───
   Lámina a la izquierda, argumentos a la derecha. La imagen se queda pegada
   mientras se leen las razones: es lo que impide que la columna larga deje
   media pantalla en blanco al lado. */
.porque{display:grid; grid-template-columns:.82fr 1fr; gap:64px; align-items:start}
.porque-lamina{
  position:sticky; top:112px; overflow:hidden;
  border-radius:var(--radio); box-shadow:var(--sombra-3);
}
.porque-lamina img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover}
.porque-texto .antetitulo{margin:0 0 14px}
.porque-texto h2{
  margin:0 0 18px; font:600 clamp(25px, 3vw, 38px)/1.12 var(--display);
  letter-spacing:-.032em; max-width:20ch;
}
.porque-texto .entradilla{
  margin:0 0 34px; max-width:56ch; color:var(--tinta-2);
  font-size:16.5px; line-height:1.7;
}
.razones{list-style:none; margin:0; padding:0}
.razones li{padding:24px 0; border-top:1px solid var(--linea)}
.razones h3{margin:0 0 8px; font:600 17px/1.3 var(--display); letter-spacing:-.018em}
.razones p{margin:0; max-width:58ch; color:var(--tinta-2); font-size:14.5px; line-height:1.7}

/* ─── Pasos ─── */
.pasos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(258px, 1fr)); gap:34px;
}
.pasos li{padding-top:24px; border-top:2px solid var(--tinta)}
.paso-num{
  display:block; margin-bottom:14px;
  font:400 12px/1 var(--mono); letter-spacing:.2em; color:var(--acento);
}
.pasos h3{margin:0 0 10px; font:600 19px/1.25 var(--display); letter-spacing:-.022em}
.pasos p{margin:0; color:var(--tinta-2); font-size:14.5px; line-height:1.7}

/* ─── Llamada final ───
   Tinta a sangre, justo encima del pie, que también es tinta: las dos piezas
   se leen como un solo cierre y no como una banda suelta. */
.llamada{background:var(--tinta); color:#fff}
.llamada-cuerpo{
  display:flex; align-items:center; justify-content:space-between;
  gap:48px; flex-wrap:wrap; padding:74px 32px;
}
.llamada .antetitulo{color:#7fe8ff; margin:0 0 14px}
.llamada h2{
  margin:0 0 14px; max-width:21ch;
  font:600 clamp(24px, 2.6vw, 34px)/1.15 var(--display); letter-spacing:-.03em;
}
.llamada .entradilla{margin:0; max-width:52ch; color:#9fc4d6; font-size:15.5px; line-height:1.7}
.llamada-acciones{display:flex; gap:12px; flex-wrap:wrap}
.llamada .boton{
  font:600 11.5px/1 var(--texto); letter-spacing:.13em; text-transform:uppercase;
  padding:17px 26px; border-radius:var(--radio-xs); box-shadow:none;
}
.llamada .destacado{background:#fff; color:var(--tinta)}
.llamada .suave{background:none; border:1px solid rgba(255,255,255,.35); color:#fff}
@media (hover:hover){
  .llamada .destacado:hover{background:var(--acento-vivo); color:var(--tinta)}
  .llamada .suave:hover{background:rgba(255,255,255,.14); border-color:#fff; color:#fff}
}

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

@media (max-width:1000px){
  .porque{grid-template-columns:1fr; gap:40px}
  /* Pegada no tiene sentido en una sola columna: la lámina pasa a ser la
     apertura de la sección y se recorta para no comerse la pantalla. */
  .porque-lamina{position:static}
  .porque-lamina img{aspect-ratio:16/9}
  .cifras-cima{grid-template-columns:repeat(2, 1fr)}
  .cifras-cima > div{padding-right:20px}
}
@media (max-width:820px){
  /* En móvil la barra deja de flotar. Transparente sobre la lámina taparía
     justo el titular, y además el menú se despliega colgado de ella: un
     desplegable que sale de una barra invisible parece caerse de la nada.
     Se queda en tinta y no cambia al bajar, que sobre una portada oscura es la
     lectura correcta. */
  body.inicio .barra, body.inicio .barra.compacta{
    position:sticky; background:var(--tinta); color:#fff;
    border-bottom-color:rgba(255,255,255,.14);
  }
  body.inicio .barra.compacta .marca-inmoclick{--marca-acento:#7fe8ff; color:#fff}
  body.inicio .barra.compacta .marca-lema{color:rgba(255,255,255,.6)}
  body.inicio .barra.compacta nav a{color:rgba(255,255,255,.8)}
  body.inicio .barra.compacta nav a.activo{color:#fff}
  body.inicio .barra.compacta .quien{border-left-color:rgba(255,255,255,.2)}
  body.inicio .barra.compacta .quien .boton.suave,
  body.inicio .barra.compacta .quien button.suave{
    border-color:rgba(255,255,255,.35); color:#fff; background:none;
  }
  body.inicio .barra.compacta .quien .destacado{
    background:#fff; color:var(--tinta); border-color:#fff;
  }
  body.inicio .franja-demo{padding-top:11px}

  .contenedor{padding:0 18px}
  .cima{min-height:0}
  .cima-cuerpo{padding:52px 18px 40px}
  .cifras-cima{grid-template-columns:1fr 1fr; padding:0 18px}
  .cifras-cima > div{padding:18px 16px 24px 0}
  .seccion{padding:56px 18px}
  .llamada-cuerpo{padding:52px 18px}
  /* El botón deja de ser una columna de la fila y pasa a su propio renglón,
     igual que en la fila de filtros de la vitrina. */
  .buscador .campo{flex:1 1 100%; border-right:0; border-bottom:1px solid var(--linea)}
  /* El botón cierra la pieza: no tiene nada debajo de lo que separarse, y el
     filete heredado de `.campo` se leía como una línea blanca en el canto
     inferior de la tarjeta —gris claro sobre la tinta del botón—. */
  .buscador .accion{flex:1 1 100%; border-bottom:0}
  .buscador .accion button{width:100%; min-height:58px}
  .seccion-cabeza{margin-bottom:28px}
  .rejilla-zonas{grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px}
}

/* ─── El isotipo en el resto del sistema ───
   Va después de la portada porque corrige reglas que existían antes de que
   hubiera un isotipo: el lockup era dos líneas de texto y ahora es un dibujo
   con dos líneas al lado, así que las tres cabeceras que lo pintan —panel,
   vitrina y páginas de una sola caja— pasan de columna a fila. */
.marca-publica{flex-direction:row; align-items:center; gap:12px}
.marca-publica .marca-texto{gap:5px}
/* En la barra del panel el lockup es además un enlace a la portada: sin esto
   heredaría el subrayado de cualquier `<a>`. */
.barra .marca, .barra .marca:hover{text-decoration:none; color:#fff}
.barra .marca-texto{gap:5px}

/* ─── Retoques de la portada ───
   Van al final porque corrigen reglas de más arriba de este mismo bloque y
   tienen que ganarlas por orden, no por especificidad inflada. */

/* Con la franja de demostración, la barra deja de flotar: transparente se
   recortaría contra el ladrillo del aviso, no contra la lámina, y el conjunto
   se lee como un error de maqueta. Vuelve al flujo y se pinta en tinta. */
body.inicio.con-demo .barra, body.inicio.con-demo .barra.compacta{
  position:sticky; background:var(--tinta); color:#fff;
  border-bottom-color:rgba(255,255,255,.14);
}
body.inicio.con-demo .barra.compacta .marca-inmoclick{--marca-acento:#7fe8ff; color:#fff}
body.inicio.con-demo .barra.compacta .marca-lema{color:rgba(255,255,255,.6)}
body.inicio.con-demo .barra.compacta nav a{color:rgba(255,255,255,.8)}
body.inicio.con-demo .barra.compacta nav a.activo{color:#fff}
body.inicio.con-demo .barra.compacta .quien{border-left-color:rgba(255,255,255,.2)}
body.inicio.con-demo .barra.compacta .quien .boton.suave,
body.inicio.con-demo .barra.compacta .quien button.suave{
  background:none; border-color:rgba(255,255,255,.35); color:#fff;
}
body.inicio.con-demo .barra.compacta .quien .destacado{
  background:#fff; color:var(--tinta); border-color:#fff;
}
body.inicio.con-demo .franja-demo{padding-top:12px}
body.inicio.con-demo .cima-cuerpo{padding-top:92px}

/* El titular lleva su propio salto de línea, así que el tope en `ch` solo
   servía para partirlo una tercera vez y dejar «fin» solo en su renglón. */
.cima h1{max-width:none}

/* El velo de arriba estaba tan cargado que se comía el cielo de la lámina, que
   es justo lo que hace que la portada no parezca un rectángulo negro. */
.cima-velo{
  background:
    linear-gradient(180deg, rgba(3,16,26,.5) 0%, rgba(3,16,26,.26) 34%,
                    rgba(3,16,26,.58) 72%, rgba(3,16,26,.94) 100%),
    linear-gradient(96deg, rgba(3,16,26,.72) 0%, rgba(3,16,26,.24) 54%, transparent 88%);
}

/* Las láminas claras —la ladera, los lotes— dejaban el nombre del municipio en
   blanco sobre cielo. El degradado arranca antes y cierra más oscuro: es la
   única forma de que el rótulo aguante sobre cuatro escenas distintas. */
.zona::after{
  background:linear-gradient(180deg, rgba(4,18,27,0) 18%, rgba(4,18,27,.5) 58%,
                             rgba(4,18,27,.95) 100%);
}
/* Sin filete bajo la barra flotante: sobre la lámina, esa línea corta la
   fotografía en dos y es lo único que delata que hay una caja encima. Vuelve
   en cuanto la barra se apoya en papel (`.compacta`). */
body.inicio .barra{border-bottom-color:transparent}
/* La llamada final y el pie son los dos de tinta y se tocan: sin este filete
   la página termina en un bloque oscuro de 500px sin ninguna articulación. */
.llamada + .pie-publico{border-top:1px solid rgba(255,255,255,.1)}

/* Con tres botones en la fila —Escríbenos, Inicio, Acceso operador— el rótulo
   más largo se partía en dos renglones y dejaba ese botón más alto que sus
   vecinos. Se aprietan y se les prohíbe partirse; si aun así no caben, la fila
   envuelve en vez de desbordar, que es lo que hace un teléfono estrecho. */
@media (max-width:820px){
  body.vitrina .quien{flex-wrap:wrap; justify-content:flex-end; gap:8px}
  body.vitrina .quien .boton, body.vitrina .quien button{
    white-space:nowrap; padding:11px 12px; font-size:10px; letter-spacing:.08em;
  }
}

/* ─── Encuadre según la lámina sea foto o dibujo ───
   El dibujo de la ciudad lleva el asunto en la mitad de abajo y se encuadra
   bajo; una fotografía de una casa lo lleva en el centro, y con el mismo
   encuadre se le corta el tejado. */
.cima-lamina.foto{object-position:center 50%}
/* Y en la sección del «por qué»: el dibujo es vertical de nacimiento (900×1200)
   y aguanta un 3/4; una fotografía apaisada metida en esa caja se convierte en
   una rendija. El 4/5 sigue siendo retrato y recorta lo justo. */
.porque-lamina img.foto{aspect-ratio:4/5}


/* ─────────────── Menú de teléfono de la vitrina ───────────────
   Tres secciones y hasta tres botones no caben en la fila de un teléfono: se
   partían en dos renglones de rótulos apretados que empujaban la barra hasta
   comerse el titular de la portada. Aquí se pliegan detrás del botón de tres
   rayas y la barra vuelve a llevar solo la marca y una puerta.

   El contenedor es transparente mientras haya sitio: `display:contents` lo
   borra de la maqueta y `nav` y `.quien` siguen siendo hijos directos de la
   barra, así que el escritorio no se entera de que existe. Y todo el bloque
   cuelga de `.con-js` porque sin JavaScript nadie podría desplegarlo: quien
   llegue sin él ve la cabecera de siempre, envuelta en dos renglones, que es
   incómoda pero navegable. */

.menu-vitrina{display:contents}
.hamburguesa{display:none}

@media (max-width:820px){
  html.con-js body.vitrina .barra{flex-wrap:nowrap; gap:14px; padding:0 16px}

  html.con-js body.vitrina .hamburguesa{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    margin-left:auto; flex:0 0 auto;
    width:42px; height:42px; padding:0 8px;
    background:none; border:0; border-radius:var(--radio-xs);
    color:inherit; box-shadow:none;
  }
  .hamburguesa span{
    display:block; height:2px; width:100%; border-radius:2px;
    background:currentColor;
    transition:transform .22s cubic-bezier(.2,.7,.3,1), opacity .16s ease;
  }
  /* Las tres rayas se cruzan en aspa al abrir: el botón dice a la vez qué hay
     detrás y cómo cerrarlo, que en un desplegable a pantalla completa es la
     única señal de salida que el visitante encuentra sin buscarla. */
  .hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hamburguesa:active{transform:none}
  /* El botón hereda el fondo de acento de cualquier `button`; sobre la barra
     eso sería un rectángulo azul con tres rayas dentro. */
  .hamburguesa:hover{background:none; box-shadow:none}
  .hamburguesa:focus-visible{outline:2px solid currentColor; outline-offset:2px}

  /* El desplegable es una lámina de tinta y no papel blanco: en la portada la
     barra ya es tinta en teléfono y así el menú es su continuación; en la
     vitrina, donde la barra es blanca, el contraste lo separa de las fichas
     que quedan debajo en vez de fundirse con ellas. */
  html.con-js body.vitrina .menu-vitrina{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--tinta); color:#fff;
    padding:6px 16px 18px;
    box-shadow:var(--sombra-3);
    animation:desplegar .22s cubic-bezier(.2,.7,.3,1);
  }
  html.con-js body.vitrina .menu-vitrina.abierto{display:block}
  @keyframes desplegar{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
  /* La entrada escalonada de la barra vuelve a dispararse cada vez que el
     panel pasa de `none` a `block`, y su último retardo son 360ms: el menú
     tardaría más en llenarse que en abrirse. Aquí manda `desplegar`, que ya
     mueve la lámina entera. */
  html.con-js body.vitrina .menu-vitrina nav a,
  html.con-js body.vitrina .menu-vitrina .quien{animation:none}

  /* Los enlaces dejan de ser un carrusel horizontal y pasan a ser una lista:
     cada sección en su renglón, con el área de toque entera. */
  html.con-js body.vitrina .barra nav{
    display:flex; flex-direction:column; gap:0;
    width:100%; margin:0; overflow:visible; padding:0;
  }
  html.con-js body.vitrina .barra nav a{
    width:100%; padding:15px 2px; color:rgba(255,255,255,.86);
    border-bottom:1px solid rgba(255,255,255,.12);
    font-size:12px; letter-spacing:.14em;
  }
  /* El subrayado que crece desde el centro no tiene sentido en una lista
     vertical; la sección actual se marca con el cian de la casa. */
  html.con-js body.vitrina .barra nav a::after{display:none}
  html.con-js body.vitrina .barra nav a.activo{color:var(--acento-vivo)}
  html.con-js body.vitrina .barra nav a:focus-visible{outline-color:var(--acento-vivo); color:#fff}

  /* Las acciones se apilan a lo ancho: en un desplegable, tres botones en fila
     vuelven a ser tres rótulos de 10px, que es justo lo que veníamos a quitar. */
  html.con-js body.vitrina .quien{
    display:flex; flex-direction:column; align-items:stretch;
    gap:9px; margin:16px 0 0; padding:0;
    border-left:0; color:rgba(255,255,255,.7);
  }
  html.con-js body.vitrina .quien form{display:block; width:100%}
  html.con-js body.vitrina .quien .boton, html.con-js body.vitrina .quien button{
    display:block; width:100%; text-align:center;
    padding:15px 14px; font-size:11px; letter-spacing:.13em; white-space:nowrap;
  }
  html.con-js body.vitrina .quien .boton.suave, html.con-js body.vitrina .quien button.suave{
    background:none; border:1px solid rgba(255,255,255,.32); color:#fff;
  }
  html.con-js body.vitrina .quien .destacado{
    background:#fff; color:var(--tinta); border-color:#fff;
  }
  html.con-js body.vitrina .quien-soy{color:rgba(255,255,255,.8); text-align:center}
}

/* ─────────────── El escudo de marca en un teléfono ───────────────
   El logotipo se dibujaba igual a 1920px que a 360px: ninguna media query
   tocaba nunca su tamaño, solo su color. Con el isotipo a 34px, «INMOCLICK» a
   19px con .17em de entreletra y el lema a .24em debajo, el escudo mide unos
   200px de ancho; sumando el relleno de la barra, el hueco y el botón de tres
   rayas, la fila pedía cerca de 290px. Cabía raspando en un teléfono de 360 y
   se salía en uno de 320.

   Y se salía mal. `.marca-texto` lleva `min-width:0`, así que el escudo sí se
   encoge cuando falta sitio, pero `.marca-inmoclick` lleva `white-space:nowrap`
   y entonces el logotipo se desborda de su propia caja y se mete por debajo del
   botón de tres rayas. El lema hace lo contrario: como no lleva `nowrap`,
   partía «Bienes raíces de lujo» en dos renglones y estiraba la barra a lo
   alto.

   Aquí el escudo se compone a escala de teléfono. El lema se retira de la
   cabecera —que no del sitio: lo dicen igual el titular de la portada y el
   pie—, y es la retirada que más espacio devuelve, porque de las dos líneas
   era la ancha.

   Nada de esto llega al escritorio: todo cuelga de un ancho máximo, así que la
   barra ancha se sigue pintando exactamente igual que antes. */
@media (max-width:560px){
  /* `body.vitrina .barra .marca` ya fija el hueco más arriba y le gana a un
     `.barra .marca` a secas: hay que repetir el selector entero para poder
     estrecharlo aquí. */
  .barra .marca, body.vitrina .barra .marca, .marca-publica{gap:9px; min-width:0}
  .barra .isotipo, .marca-publica .isotipo{width:28px; height:28px}
  .marca-inmoclick{font-size:16px; letter-spacing:.11em}
  .barra .marca-lema{display:none}
}

/* Un escalón más para los teléfonos estrechos —el iPhone SE sigue siendo 320px
   de ancho—, donde 16px con .11em todavía dejaba el logotipo pegado al botón. */
@media (max-width:380px){
  .barra .isotipo{width:26px; height:26px}
  .marca-inmoclick{font-size:15px; letter-spacing:.08em}
}