/* ═══ Inmueble Directo ═══
   Claro = mármol Calacatta con vetas negras y marrones. Oscuro = azabache + nogal.
   Dos mundos, no un inverso.
   Las texturas (--tex-*) las dibuja app.js con canvas y las inyecta acá. */

:root{
  --marmol:#F7F5F2; --marmol-hueso:#EDE9E3; --veta:#2A2724;
  --azabache:#131110; --azabache-piedra:#1E1B19;
  --nogal:#6B4A2F; --nogal-claro:#A9825C; --bronce:#B08D57;
  --ok:#3F6B52; --espera:#8A6D3B; --alerta:#8C3B36;

  --fondo:var(--marmol);
  --sup:#FFFDFB;
  --sup-2:var(--marmol-hueso);
  --tinta:var(--veta);
  --tinta-2:#6E665E;
  --tinta-3:#9A9089;
  --linea:#DFD9D1;
  --acento:var(--nogal);
  --metal:var(--bronce);
  --sombra:0 1px 2px rgba(42,39,36,.06), 0 8px 24px rgba(42,39,36,.07);
  --sombra-alta:0 24px 70px rgba(42,39,36,.18);

  /* piedra: base, vetas negras, vetas marrones */
  --piedra-1:#F7F4F0; --piedra-2:#E6E0D7;
  --piedra-veta:rgba(38,34,31,.45);
  --piedra-veta-2:rgba(107,74,47,.38);
  --tinta-sobre-piedra:#2A2724;
  --borde-piedra:rgba(176,141,87,.55);

  --tex-piedra:none; --tex-boton:none;
}
:root[data-tema="noche"]{
  --fondo:var(--azabache);
  --sup:var(--azabache-piedra);
  --sup-2:#262220;
  --tinta:#F0EBE5;
  --tinta-2:#B3A99F;
  --tinta-3:#877C73;
  --linea:#332E2B;
  --acento:var(--nogal-claro);
  --metal:#C9A470;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
  --sombra-alta:0 24px 70px rgba(0,0,0,.7);

  --piedra-1:#221E1C; --piedra-2:#100E0D;
  --piedra-veta:rgba(201,164,112,.34);
  --piedra-veta-2:rgba(169,130,92,.42);
  --tinta-sobre-piedra:#F4EFE9;
  --borde-piedra:rgba(201,164,112,.45);

  --ok:#6FA286; --espera:#C09B5E; --alerta:#C4726C;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:"Archivo",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background .5s ease, color .5s ease;
}
#piedra-fondo{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:none}
h1,h2,h3,.display{font-family:"Bodoni Moda",Georgia,"Times New Roman",serif; font-weight:400; text-wrap:balance; margin:0}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
img{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--metal); outline-offset:3px; border-radius:4px}
.rotulo{font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3)}
.cifra{font-variant-numeric:tabular-nums}
.oculto{display:none !important}

/* ═══ MÁRMOL: la marca de la casa ═══ */
.marmolado{
  background-image:var(--tex-boton);
  background-size:cover; background-position:center;
  color:var(--tinta-sobre-piedra);
  border:1px solid var(--borde-piedra);
  position:relative; overflow:hidden;
}
.marmolado::after{                      /* brillo de piedra pulida */
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,.16) 100%);
  pointer-events:none;
}
:root[data-tema="noche"] .marmolado::after{
  background:linear-gradient(115deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 45%, rgba(201,164,112,.12) 100%);
}
.marmolado > *{position:relative; z-index:1}
.marmolado:hover{filter:brightness(1.04)}
.marmolado:active{filter:brightness(.97)}

.marco{
  position:relative; z-index:1;
  width:100%; max-width:430px; margin:0 auto; height:100%;
  background:var(--fondo); display:flex; flex-direction:column; overflow:hidden;
}
@media (min-width:900px){
  body{padding:34px 0; height:auto; min-height:100vh}
  #piedra-fondo{display:block}
  .marco{
    height:min(880px,calc(100vh - 68px));
    border-radius:44px; box-shadow:var(--sombra-alta), 0 0 0 9px #2A2724, 0 0 0 10px rgba(176,141,87,.5);
  }
}

/* ── Cabecera: placa de mármol, como la del estudio ── */
.tope{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px 12px; border-bottom:1px solid var(--borde-piedra);
  background-image:var(--tex-piedra); background-size:cover; background-position:center;
  flex:0 0 auto; z-index:5; position:relative;
}
.tope::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0)); pointer-events:none}
:root[data-tema="noche"] .tope::after{background:linear-gradient(180deg, rgba(201,164,112,.07), rgba(255,255,255,0))}
.tope > *{position:relative; z-index:1}
.sello{display:flex; align-items:center; gap:9px; cursor:pointer}
.sello b{font-family:"Bodoni Moda",serif; font-weight:700; font-size:16.5px; letter-spacing:.01em; color:var(--tinta-sobre-piedra); white-space:nowrap}
.sello .marca{flex:0 0 auto; width:26px; height:25px; object-fit:contain}
.tope-acciones{display:flex; gap:6px; align-items:center}
.icono-btn{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--borde-piedra); color:var(--tinta-2); transition:.25s; position:relative; flex:0 0 auto; background:rgba(255,255,255,.35)}
:root[data-tema="noche"] .icono-btn{background:rgba(0,0,0,.25)}
.icono-btn:hover{border-color:var(--metal); color:var(--metal)}
#btn-textura .a-marmol{display:none}
:root[data-textura="liso"] #btn-textura .a-liso{display:none}
:root[data-textura="liso"] #btn-textura .a-marmol{display:block}
:root[data-textura="liso"] #btn-textura{border-color:var(--metal); color:var(--metal)}
#btn-tema svg{transition:transform .55s cubic-bezier(.5,1.6,.4,1)}
#btn-tema .sol{display:none}
:root[data-tema="noche"] #btn-tema .luna{display:none}
:root[data-tema="noche"] #btn-tema .sol{display:block}
:root[data-tema="noche"] #btn-tema{border-color:var(--metal); color:var(--metal)}
#btn-tema:active svg{transform:rotate(-180deg) scale(.8)}
#btn-favoritos.tiene{border-color:var(--alerta); color:var(--alerta)}
.pin{position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--alerta); color:#FFF; font-size:9.5px; font-weight:700; display:grid; place-items:center}

.lienzo{flex:1 1 auto; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; -webkit-overflow-scrolling:touch}
.vista{display:none; padding-bottom:26px}
.vista.activa{display:block; animation:entrar .34s ease both}
@keyframes entrar{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes surgir{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ── Portada: foto + placa de mármol con el nombre ── */
.portada{position:relative; height:355px; overflow:hidden; display:flex; align-items:flex-end}
.portada > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.portada .velo-foto{position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,17,16,.10) 0%, rgba(19,17,16,.28) 45%, rgba(19,17,16,.82) 100%)}
.portada .contenido{position:relative; padding:0 18px 20px; width:100%}
.placa{
  border-radius:18px; padding:20px 20px 22px;
  box-shadow:0 18px 40px rgba(19,17,16,.32);
  background-image:var(--tex-piedra); background-size:cover; background-position:center;
  border:1px solid var(--borde-piedra); position:relative; overflow:hidden;
}
.placa::before{                        /* velo: el titular necesita fondo parejo */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 30% 55%, rgba(255,253,251,.72) 0%, rgba(255,253,251,.42) 55%, rgba(255,253,251,0) 100%);
}
:root[data-tema="noche"] .placa::before{
  background:radial-gradient(120% 100% at 30% 55%, rgba(19,17,16,.68) 0%, rgba(19,17,16,.40) 55%, rgba(19,17,16,0) 100%);
}
.placa::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,0) 55%); pointer-events:none}
:root[data-tema="noche"] .placa::after{background:linear-gradient(120deg, rgba(201,164,112,.06), rgba(255,255,255,0) 55%)}
.placa > *{position:relative; z-index:1}
.placa h1{font-size:34px; font-weight:500; line-height:1.04; letter-spacing:-.01em; margin:8px 0 0; color:var(--tinta-sobre-piedra)}
.placa h1 em{font-style:italic; color:var(--nogal)}
:root[data-tema="noche"] .placa h1 em{color:var(--metal)}
.placa p{margin:10px 0 0; max-width:32ch; color:var(--tinta-2); font-size:13px}
.placa .rotulo{color:var(--nogal)}
:root[data-tema="noche"] .placa .rotulo{color:var(--metal)}
.filete{width:44px; height:1px; background:var(--metal); margin-bottom:12px}

/* ── Buscador ── */
.buscador{margin:14px 16px 0; position:relative; z-index:2; background:var(--sup); border:1px solid var(--linea); border-radius:16px; box-shadow:var(--sombra); padding:6px}
.buscador .fila{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.campo{padding:9px 11px; border-radius:11px; background:var(--sup-2); min-width:0}
.campo .rotulo{display:block; margin-bottom:2px}
.campo select,.campo input{width:100%; border:0; background:none; color:var(--tinta); font:500 14px "Archivo",sans-serif; padding:0; -webkit-appearance:none; appearance:none}
.buscar-btn{width:100%; margin-top:6px; padding:14px; border-radius:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:12.5px; display:flex; align-items:center; justify-content:center; gap:8px}

.seccion{padding:24px 18px 0}
.seccion-tope{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px}
.seccion-tope h2{font-size:23px; line-height:1.1}
.orden{font-size:12px; color:var(--tinta-2); border:1px solid var(--linea); border-radius:99px; padding:6px 11px; background:var(--sup)}

/* ── Tarjetas ── */
.tarjeta{
  background:var(--sup); border:1px solid var(--linea); border-radius:18px; overflow:hidden;
  box-shadow:var(--sombra); margin-bottom:14px; width:100%; text-align:left; display:block;
  transition:transform .25s, box-shadow .25s; animation:surgir .45s ease both;
}
.tarjeta:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta)}
.tarjeta .foto{position:relative; aspect-ratio:4/3; background:var(--sup-2); overflow:hidden}
.tarjeta .foto img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.tarjeta:hover .foto img{transform:scale(1.04)}
.tarjeta .foto::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 45%,rgba(0,0,0,.30))}
.chips{position:absolute; left:10px; top:10px; display:flex; gap:6px; flex-wrap:wrap; z-index:1; max-width:72%}
.chip{font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:99px; background:rgba(19,17,16,.72); color:#F7F5F2; backdrop-filter:blur(6px); display:inline-flex; align-items:center; gap:4px}
.chip.verificado{background:rgba(63,107,82,.92)}
.chip.tour{background:rgba(176,141,87,.94); color:#1a1512}
.corazon{position:absolute; right:10px; top:10px; z-index:2; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(19,17,16,.55); backdrop-filter:blur(6px); color:#F7F5F2; transition:.2s}
.corazon:hover{background:rgba(19,17,16,.75)}
.corazon svg{width:17px; height:17px; transition:transform .3s cubic-bezier(.5,1.7,.4,1)}
.corazon[aria-pressed="true"]{color:#E8776F}
.corazon[aria-pressed="true"] svg{fill:currentColor; transform:scale(1.15)}
.tarjeta .cuerpo{padding:13px 14px 15px}
.tarjeta .dir{font-family:"Bodoni Moda",serif; font-size:19px; line-height:1.15}
.tarjeta .barrio{font-size:12.5px; color:var(--tinta-3); margin-top:2px}
.tarjeta .pie{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:11px; padding-top:11px; border-top:1px solid var(--linea)}
.precio{font-family:"Bodoni Moda",serif; font-size:22px; font-weight:500}
.precio small{font-size:11px; font-family:"Archivo",sans-serif; color:var(--tinta-3); letter-spacing:.1em; text-transform:uppercase; margin-right:5px; font-weight:600}
.precio .pormes{font-size:11px; font-family:"Archivo",sans-serif; color:var(--tinta-3); letter-spacing:.04em; margin-left:3px; font-weight:500}
.datos{font-size:12.5px; color:var(--tinta-2); display:flex; gap:9px}
.datos span{white-space:nowrap}

.vacio{text-align:center; padding:34px 24px; color:var(--tinta-3)}
.vacio svg{width:38px; height:38px; margin:0 auto 12px; opacity:.5}
.vacio b{display:block; font-family:"Bodoni Moda",serif; font-size:20px; color:var(--tinta); font-weight:400; margin-bottom:4px}
.vacio button{margin-top:14px; padding:10px 18px; border-radius:99px; border:1px solid var(--metal); color:var(--metal); font-size:13px; font-weight:600}

/* ── Visor ── */
.visor{position:relative; background:#0B0A09; aspect-ratio:4/3; overflow:hidden}
.galeria{display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.galeria::-webkit-scrollbar{display:none}
.galeria img{flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:center}
#pano{width:100%; height:100%; display:block; touch-action:pan-y}
.visor .capa{position:absolute; inset:0}
.visor .capa[hidden]{display:none}
.visor .pista{position:absolute; left:50%; bottom:64px; transform:translateX(-50%); background:rgba(19,17,16,.72); color:#F7F5F2; font-size:11.5px; letter-spacing:.05em; padding:7px 13px; border-radius:99px; backdrop-filter:blur(6px); pointer-events:none; transition:opacity .5s; z-index:3}
.modos{position:absolute; left:12px; bottom:12px; display:flex; gap:5px; background:rgba(19,17,16,.62); padding:4px; border-radius:99px; backdrop-filter:blur(8px); z-index:3}
.modos button{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:7px 12px; border-radius:99px; color:#CFC7BE; transition:.2s}
.modos button[aria-pressed="true"]{background:var(--bronce); color:#1a1512}
.modos button[disabled]{opacity:.3; cursor:not-allowed}
.contador{position:absolute; right:12px; bottom:14px; font-size:11px; color:#CFC7BE; letter-spacing:.08em; background:rgba(19,17,16,.62); padding:6px 10px; border-radius:99px; backdrop-filter:blur(8px); z-index:3}
.volver{position:absolute; left:12px; top:12px; z-index:4; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:rgba(19,17,16,.55); backdrop-filter:blur(6px); color:#F7F5F2}
.visor-acciones{position:absolute; right:12px; top:12px; z-index:4; display:flex; gap:8px}
.visor-acciones button{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:rgba(19,17,16,.55); backdrop-filter:blur(6px); color:#F7F5F2; transition:.2s}
.visor-acciones button[aria-pressed="true"]{color:#E8776F}
.visor-acciones button[aria-pressed="true"] svg{fill:currentColor}
.capitulos{display:flex; gap:7px; overflow-x:auto; padding:12px 18px 2px; scrollbar-width:none}
.capitulos::-webkit-scrollbar{display:none}
.capitulos button{flex:0 0 auto; font-size:12px; padding:7px 13px; border-radius:99px; border:1px solid var(--linea); color:var(--tinta-2); transition:.2s}
.capitulos button[aria-pressed="true"]{border-color:var(--metal); color:var(--metal); background:color-mix(in srgb, var(--metal) 10%, transparent)}

/* ── Ficha ── */
.ficha-tope{padding:16px 18px 0}
.ficha-tope h1{font-size:29px; line-height:1.08}
.ficha-precio{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:12px; padding-bottom:16px; border-bottom:1px solid var(--linea)}
.ficha-precio .precio{font-size:29px}
.expensas{font-size:12px; color:var(--tinta-3); text-align:right; line-height:1.35}
.grilla-datos{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:14px; overflow:hidden; margin:16px 18px 0}
.grilla-datos div{background:var(--sup); padding:12px 6px; text-align:center}
.grilla-datos b{display:block; font-family:"Bodoni Moda",serif; font-size:21px; font-weight:500}
.grilla-datos span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3)}
.duenio{display:flex; align-items:center; gap:12px; margin:18px 18px 0; padding:14px; background:var(--sup); border:1px solid var(--linea); border-radius:16px}
.avatar{width:44px; height:44px; border-radius:50%; background:var(--sup-2); border:1px solid var(--metal); display:grid; place-items:center; font-family:"Bodoni Moda",serif; font-size:18px; color:var(--metal); flex:0 0 auto}
.duenio .quien{flex:1; min-width:0}
.duenio .quien b{display:block; font-size:14.5px}
.duenio .quien span{font-size:12px; color:var(--ok); display:flex; align-items:center; gap:4px; margin-top:1px}
.duenio .quien span.sin{color:var(--tinta-3)}

.bloque{margin:18px 18px 0; border-radius:16px; overflow:hidden; border:1px solid var(--linea); background:var(--sup)}
.bloque .cabeza{display:flex; align-items:center; gap:11px; padding:15px}
.bloque .cabeza .ico{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto}
.bloque .cabeza h3{font-size:17px; line-height:1.2}
.bloque .cabeza p{margin:2px 0 0; font-size:12.5px; color:var(--tinta-2)}
.bloque .lista{border-top:1px solid var(--linea)}
.doc{display:flex; align-items:center; gap:11px; padding:12px 15px; border-bottom:1px solid var(--linea); font-size:13.5px}
.doc:last-child{border-bottom:0}
.doc .nombre{flex:1; min-width:0}
.doc .candado{color:var(--tinta-3); font-size:11.5px; letter-spacing:.06em; display:flex; align-items:center; gap:5px}
.doc.abierto .candado{color:var(--ok)}
.accion{display:block; width:calc(100% - 30px); margin:0 15px 15px; padding:13px; border-radius:12px; background:var(--tinta); color:var(--fondo); font-weight:600; text-align:center; transition:filter .2s}
.accion:hover{filter:brightness(1.15)}
.accion.secundaria{background:none; border:1px solid var(--metal); color:var(--metal)}
.accion.piedra{padding:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:12.5px}
.accion.whatsapp{background:#25D366; color:#0B3D22; display:flex; align-items:center; justify-content:center; gap:8px}
.legal{margin:22px 18px 0; padding-top:16px; border-top:1px solid var(--linea); font-size:11.5px; line-height:1.5; color:var(--tinta-3); font-style:italic}

/* ── Estados ── */
.progreso{display:flex; align-items:center; gap:8px; margin:16px 18px 0}
.progreso .barra-p{flex:1; height:5px; border-radius:99px; background:var(--sup-2); overflow:hidden}
.progreso .barra-p i{display:block; height:100%; background:linear-gradient(90deg,var(--acento),var(--metal)); border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.3,1)}
.progreso b{font-size:12px; color:var(--tinta-2); font-weight:600}
.chequeo{display:flex; align-items:center; gap:11px; padding:13px 15px; border-bottom:1px solid var(--linea)}
.chequeo:last-child{border-bottom:0}
.chequeo .nombre{flex:1; min-width:0}
.chequeo .nombre b{display:block; font-size:14px; font-weight:500}
.chequeo .nombre span{font-size:11.5px; color:var(--tinta-3)}
.estado{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:6px; white-space:nowrap}
.estado.ok{background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok)}
.estado.espera{background:color-mix(in srgb,var(--espera) 15%,transparent); color:var(--espera)}
.estado.falta{background:var(--sup-2); color:var(--tinta-3)}
.punto{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.canon{margin:18px; padding:20px; border-radius:18px; text-align:center; box-shadow:var(--sombra)}
.canon .precio{font-size:34px; display:block; margin:6px 0 2px; color:var(--tinta-sobre-piedra)}
.canon .rotulo{color:var(--nogal)}
:root[data-tema="noche"] .canon .rotulo{color:var(--metal)}
.canon p{margin:0; font-size:12.5px; color:var(--tinta-2)}
.canon .accion{width:100%; margin:14px 0 0}

/* ── Instalar ── */
.instalar{margin:20px 18px 0; padding:16px; border-radius:16px; background:var(--sup); border:1px dashed var(--metal); display:flex; align-items:center; gap:13px}
.instalar .ico{width:40px; height:40px; border-radius:11px; background:color-mix(in srgb,var(--metal) 16%,transparent); color:var(--metal); display:grid; place-items:center; flex:0 0 auto}
.instalar .txt{flex:1; min-width:0}
.instalar .txt b{display:block; font-size:14px}
.instalar .txt span{font-size:12px; color:var(--tinta-2)}
.instalar button{padding:9px 14px; border-radius:10px; font-weight:600; font-size:13px; white-space:nowrap}

/* ── Mapa ── */
.mapa-caja{position:relative; background:var(--sup-2); overflow:hidden}
#mapa-real{position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s}
#mapa-real.activo{opacity:1; pointer-events:auto}
#lienzo-mapa{width:100%; display:block; touch-action:none; cursor:grab; position:relative; z-index:1}
#lienzo-mapa.arrastrando{cursor:grabbing}
#lienzo-mapa.dibujando{cursor:crosshair}
#lienzo-mapa.tapado{visibility:hidden; pointer-events:none}   /* sigue ocupando el lugar */
/* capa transparente para trazar la zona encima del mapa real */
#capa-trazo{position:absolute; inset:0; width:100%; z-index:2; display:none; touch-action:none; cursor:crosshair}
#capa-trazo.activa{display:block}

/* pines del mapa real */
.pin-precio{
  font:700 11.5px "Archivo",sans-serif; letter-spacing:.01em;
  padding:6px 11px; border-radius:12px; white-space:nowrap;
  background:rgba(255,253,251,.97); color:#2A2724;
  border:1px solid rgba(176,141,87,.55); box-shadow:0 3px 10px rgba(19,17,16,.26);
  cursor:pointer; transform:translateY(-6px); transition:transform .18s, background .18s;
}
.pin-precio:hover{transform:translateY(-9px)}
.pin-precio.activo{background:#6B4A2F; color:#FFF9F2; border-color:#6B4A2F}
.pin-precio.grupo{background:#6B4A2F; color:#FFF9F2; border-color:#6B4A2F; padding:7px 12px}
.pin-precio.grupo b{font-family:"Bodoni Moda",serif; font-size:14px; margin-right:2px}
:root[data-tema="noche"] .pin-precio.grupo{background:#C9A470; color:#1a1512; border-color:#C9A470}
:root[data-tema="noche"] .pin-precio{background:rgba(30,27,25,.96); color:#F0EBE5; border-color:rgba(201,164,112,.45)}
:root[data-tema="noche"] .pin-precio.activo{background:#C9A470; color:#1a1512; border-color:#C9A470}
.maplibregl-ctrl-attrib{font-size:10px}
.maplibregl-ctrl-attrib a{color:inherit}
.mapa-barra{position:absolute; left:12px; right:12px; top:12px; display:flex; gap:7px; z-index:3}
.mapa-barra button{
  padding:9px 13px; border-radius:99px; font-size:12px; font-weight:600;
  background:rgba(255,253,251,.92); color:var(--veta); border:1px solid var(--borde-piedra);
  backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(19,17,16,.14); display:flex; align-items:center; gap:6px;
}
:root[data-tema="noche"] .mapa-barra button{background:rgba(30,27,25,.92); color:#F0EBE5}
.mapa-barra button[aria-pressed="true"]{background:var(--nogal); color:#FFF9F2; border-color:var(--nogal)}
.mapa-zoom{position:absolute; right:12px; bottom:12px; display:flex; flex-direction:column; gap:1px; z-index:3; border-radius:12px; overflow:hidden; box-shadow:0 4px 14px rgba(19,17,16,.18)}
.mapa-zoom button{width:38px; height:38px; background:rgba(255,253,251,.94); color:var(--veta); font-size:19px; display:grid; place-items:center; font-family:"Archivo",sans-serif}
:root[data-tema="noche"] .mapa-zoom button{background:rgba(30,27,25,.94); color:#F0EBE5}
.mapa-cuenta{
  position:absolute; left:12px; bottom:12px; z-index:3;
  background:rgba(19,17,16,.78); color:#F7F5F2; font-size:12px; padding:8px 13px; border-radius:99px;
  backdrop-filter:blur(6px); display:flex; align-items:center; gap:7px;
}
.mapa-cuenta b{font-family:"Bodoni Moda",serif; font-size:15px; font-weight:500}
.tarjeta-mapa{
  position:absolute; left:12px; right:12px; bottom:14px; z-index:4;
  background:var(--sup); border:1px solid var(--linea); border-radius:16px; overflow:hidden;
  box-shadow:var(--sombra-alta); display:flex; gap:0; align-items:stretch;
  transform:translateY(140%); transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.tarjeta-mapa.visible{transform:translateY(0)}
.tarjeta-mapa img{width:104px; height:104px; object-fit:cover; flex:0 0 auto}
.tarjeta-mapa .info{padding:11px 12px; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center}
.tarjeta-mapa .info b{font-family:"Bodoni Moda",serif; font-size:17px; display:block}
.tarjeta-mapa .info span{font-size:11.5px; color:var(--tinta-3)}
.tarjeta-mapa .info .precio{font-size:18px; margin-top:5px}
/* la X: 38px de área táctil, que con el dedo 26 no se acierta nunca */
.tarjeta-mapa .cerrar{
  position:absolute; right:6px; top:6px; width:38px; height:38px; z-index:3;
  border-radius:50%; background:var(--sup-2); color:var(--tinta-2);
  display:grid; place-items:center; border:1px solid var(--linea);
}
.tarjeta-mapa .cerrar:hover{background:var(--alerta); color:#FFF; border-color:var(--alerta)}
.tarjeta-mapa .cerrar:active{transform:scale(.92)}
.leyenda-mapa{display:flex; gap:14px; padding:12px 18px 0; font-size:11.5px; color:var(--tinta-3); flex-wrap:wrap}
.leyenda-mapa span{display:flex; align-items:center; gap:6px}
.leyenda-mapa i{width:10px; height:10px; border-radius:3px; display:block}

/* ── Chat ── */
.chat-tope{display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid var(--linea); background:var(--sup)}
.chat-tope .quien{flex:1; min-width:0}
.chat-tope .quien b{display:block; font-size:14.5px}
.chat-tope .quien span{font-size:11.5px; color:var(--ok)}
.hilo{padding:16px 16px 8px; display:flex; flex-direction:column; gap:9px}
.burbuja{max-width:78%; padding:10px 13px; border-radius:16px; font-size:14px; line-height:1.4; animation:surgir .3s ease both}
.burbuja.de-ellos{align-self:flex-start; background:var(--sup-2); border-bottom-left-radius:5px}
.burbuja.mia{align-self:flex-end; background:var(--acento); color:#FFF9F2; border-bottom-right-radius:5px}
.burbuja .hora{display:block; font-size:10px; opacity:.6; margin-top:3px; text-align:right}
.burbuja.aviso{align-self:center; background:none; border:1px dashed var(--linea); color:var(--tinta-3); font-size:11.5px; font-style:italic; text-align:center; max-width:92%}
.escribir{display:flex; gap:8px; padding:10px 16px 4px; align-items:center}
.escribir input{flex:1; min-width:0; padding:11px 14px; border-radius:99px; border:1px solid var(--linea); background:var(--sup); color:var(--tinta); font:400 14px "Archivo",sans-serif}
.escribir button{width:42px; height:42px; border-radius:50%; background:var(--acento); color:#FFF9F2; display:grid; place-items:center; flex:0 0 auto}
.sugerencias{display:flex; gap:7px; overflow-x:auto; padding:10px 16px 0; scrollbar-width:none}
.sugerencias::-webkit-scrollbar{display:none}
.sugerencias button{flex:0 0 auto; font-size:12px; padding:7px 12px; border-radius:99px; border:1px solid var(--linea); color:var(--tinta-2)}

/* ── Panel del estudio ── */
.metricas{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:16px 18px 0}
.metrica{background:var(--sup); border:1px solid var(--linea); border-radius:14px; padding:12px 10px; text-align:center}
.metrica b{display:block; font-family:"Bodoni Moda",serif; font-size:24px; font-weight:500; line-height:1}
.metrica span{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3); display:block; margin-top:4px}
.metrica.urgente b{color:var(--alerta)}
.entrada{padding:13px 15px; border-bottom:1px solid var(--linea)}
.entrada:last-child{border-bottom:0}
.entrada.resuelta{opacity:.55}
.entrada .fila-1{display:flex; align-items:center; gap:10px}
.mini-avatar{width:34px; height:34px; border-radius:9px; background:var(--sup-2); border:1px solid var(--linea); display:grid; place-items:center; font-family:"Bodoni Moda",serif; font-size:14px; color:var(--tinta-2); flex:0 0 auto}
.entrada .quien{flex:1; min-width:0}
.entrada .quien b{display:block; font-size:14px; font-weight:600}
.entrada .quien span{font-size:11.5px; color:var(--tinta-3)}
.entrada .archivo{display:flex; align-items:center; gap:7px; margin-top:9px; padding:8px 10px; border-radius:10px; background:var(--sup-2); font-size:12.5px; color:var(--tinta-2)}
.entrada .archivo b{font-weight:600; color:var(--tinta); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.entrada .archivo .peso{font-size:11px; color:var(--tinta-3); white-space:nowrap}
.acciones{display:flex; gap:7px; margin-top:9px}
.acciones button{flex:1; padding:9px 6px; border-radius:10px; font-size:12.5px; font-weight:600; border:1px solid var(--linea); color:var(--tinta-2); transition:.18s}
.acciones .aprobar{background:var(--ok); border-color:var(--ok); color:#F7F5F2}
.acciones .observar{border-color:var(--espera); color:var(--espera)}
.acciones .rechazar{border-color:var(--alerta); color:var(--alerta)}
.acciones button:hover{filter:brightness(1.08)}
.resultado{margin-top:9px; font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px; animation:surgir .3s ease both}

/* ── Barra ── */
.barra{
  display:flex; border-top:1px solid var(--borde-piedra); flex:0 0 auto; position:relative;
  background-image:var(--tex-piedra); background-size:cover; background-position:center;
  padding:8px 2px calc(8px + env(safe-area-inset-bottom));
}
.barra::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events:none}
:root[data-tema="noche"] .barra::after{background:linear-gradient(180deg, rgba(201,164,112,.07), rgba(255,255,255,0))}
.barra button{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 1px; color:var(--tinta-2); font-size:9.5px; letter-spacing:.02em; transition:color .2s; position:relative; z-index:1}
.barra button[aria-current="page"]{color:var(--nogal); font-weight:600}
:root[data-tema="noche"] .barra button[aria-current="page"]{color:var(--metal)}
.barra svg{width:20px; height:20px}
.globo{position:absolute; top:1px; right:calc(50% - 17px); min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--alerta); color:#FFF; font-size:9.5px; font-weight:700; display:grid; place-items:center; font-variant-numeric:tabular-nums}

/* ── Hojas ── */
.velo{position:fixed; inset:0; background:rgba(19,17,16,.55); backdrop-filter:blur(3px); z-index:20; opacity:0; pointer-events:none; transition:opacity .3s}
.velo.abierto{opacity:1; pointer-events:auto}
.hoja{position:fixed; left:50%; bottom:0; transform:translate(-50%,102%); width:100%; max-width:430px; background:var(--sup); z-index:21; border-radius:24px 24px 0 0; padding:8px 0 calc(18px + env(safe-area-inset-bottom)); transition:transform .38s cubic-bezier(.22,1,.36,1); max-height:88vh; overflow-y:auto; box-shadow:0 -18px 50px rgba(19,17,16,.28)}
@media (min-width:900px){.hoja{bottom:34px; border-radius:24px; max-height:calc(100vh - 140px)}}
.hoja.abierta{transform:translate(-50%,0)}
.asa{width:36px; height:4px; border-radius:99px; background:var(--linea); margin:6px auto 14px}
.hoja h2{font-size:22px; padding:0 20px}
.hoja > p{padding:0 20px; margin:6px 0 0; font-size:13px; color:var(--tinta-2)}
.turnos{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:16px 20px 0}
.turno{padding:11px 6px; border-radius:12px; border:1px solid var(--linea); text-align:center; transition:.2s}
.turno b{display:block; font-family:"Bodoni Moda",serif; font-size:17px}
.turno span{font-size:10.5px; color:var(--tinta-3); letter-spacing:.06em; text-transform:uppercase}
.turno[aria-pressed="true"]{border-color:var(--metal); background:color-mix(in srgb,var(--metal) 10%,transparent)}
.turno[disabled]{opacity:.35; cursor:not-allowed}
.codigo-caja{margin:16px 20px 0; padding:22px; border-radius:16px; text-align:center; position:relative; overflow:hidden}
.codigo-caja .clave{font-family:"Bodoni Moda",serif; font-size:38px; letter-spacing:.16em; color:var(--tinta-sobre-piedra); font-variant-numeric:tabular-nums; margin:8px 0 4px}
.codigo-caja .rotulo{color:var(--nogal)}
:root[data-tema="noche"] .codigo-caja .rotulo{color:var(--metal)}
.codigo-caja small{color:var(--tinta-2); font-size:11.5px}
.alcance{padding:16px 20px 0; display:flex; flex-direction:column; gap:8px}
.check{display:flex; align-items:center; gap:11px; padding:12px 13px; border:1px solid var(--linea); border-radius:12px; font-size:13.5px; text-align:left; width:100%}
.check .caja{width:19px; height:19px; border-radius:5px; border:1.5px solid var(--linea); flex:0 0 auto; display:grid; place-items:center; transition:.2s}
.check[aria-pressed="true"] .caja{background:var(--acento); border-color:var(--acento)}
.check[aria-pressed="true"] .caja svg{opacity:1}
.check .caja svg{width:12px; height:12px; opacity:0; color:#FFF9F2}

/* ── Aviso flotante ── */
.aviso-flotante{
  position:fixed; left:50%; bottom:86px; transform:translate(-50%,20px); z-index:30;
  background:var(--tinta); color:var(--fondo); padding:11px 18px; border-radius:99px;
  font-size:13px; font-weight:500; box-shadow:var(--sombra-alta); opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s; max-width:88%; text-align:center;
}
.aviso-flotante.visible{opacity:1; transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}}

/* ═══ MODELO LISO ═══
   La misma estructura sin piedra: superficies planas. En noche el fondo se va al
   marrón (no al azabache), si no el liso oscuro queda gris de oficina. */
:root[data-textura="liso"] .tope,
:root[data-textura="liso"] .barra,
:root[data-textura="liso"] .placa{background-color:var(--sup); background-image:none}
:root[data-textura="liso"] .marmolado{background-color:var(--sup-2); background-image:none}
:root[data-textura="liso"] .tope::after,
:root[data-textura="liso"] .barra::after,
:root[data-textura="liso"] .placa::before,
:root[data-textura="liso"] .placa::after,
:root[data-textura="liso"] .marmolado::after{background:none}
:root[data-textura="liso"] #piedra-fondo{display:none}
:root[data-textura="liso"]{--borde-piedra:var(--linea)}

:root[data-tema="noche"][data-textura="liso"]{
  --fondo:#1B1613; --sup:#241E1A; --sup-2:#2E2723;
  --linea:#3A302A; --borde-piedra:#3A302A;
  --tinta-sobre-piedra:#F4EFE9;
}
@media (min-width:900px){
  :root[data-textura="liso"] body{background:var(--marmol-hueso)}
  :root[data-tema="noche"][data-textura="liso"] body{background:#120E0C}
}

/* ═══ FORMULARIOS ═══
   Los campos son propios y no los del buscador: el buscador es una franja compacta
   de cuatro celdas; esto es carga de datos, donde el rótulo tiene que leerse y el
   dedo tiene que acertar. Alto de 46px, que es el mínimo cómodo en un celular. */
.campos{display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:15px 15px 0}
.campo-f{display:flex; flex-direction:column; gap:4px; min-width:0}
.campo-f.ancho{grid-column:1 / -1}
.campo-f input, .campo-f select{
  width:100%; height:46px; padding:0 12px; border-radius:11px;
  border:1px solid var(--linea); background:var(--sup-2); color:var(--tinta);
  font:500 15px "Archivo",sans-serif; -webkit-appearance:none; appearance:none;
}
.campo-f select{background-image:none}
.campo-f input::placeholder{color:var(--tinta-3); font-weight:400}
.campo-f input:focus, .campo-f select:focus{outline:none; border-color:var(--metal)}
.campo-f input[aria-invalid="true"]{border-color:var(--alerta)}
.error-f{
  margin:12px 15px 0; padding:10px 13px; border-radius:11px; font-size:13px;
  background:color-mix(in srgb,var(--alerta) 12%,transparent); color:var(--alerta);
}
#form-publicar > .accion, #form-publicar > .legal{margin-left:15px; margin-right:15px}
#form-publicar > .accion{width:calc(100% - 30px); margin-top:15px}

/* fila de "tus propiedades" */
.mia{display:flex; align-items:center; gap:11px; padding:12px 15px; border-bottom:1px solid var(--linea)}
.mia:last-child{border-bottom:0}
.mia .quien{flex:1; min-width:0}
.mia .quien b{display:block; font-size:14px; font-weight:600}
.mia .quien span{font-size:11.5px; color:var(--tinta-3)}

/* la cuenta en la cabecera */
#btn-cuenta.dentro{border-color:var(--metal); color:var(--metal)}
/* aviso todavía sin fotos: hueco honesto, no una imagen rota */
.sin-foto{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--sup-2); color:var(--tinta-3);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
}

/* ═══ TARJETA: WhatsApp y contadores ═══
   El botón va abajo del precio y no encima de la foto: si tapa la imagen, compite
   con lo único que la gente mira. Y con área de 40px, que es lo que necesita un dedo. */
.wsp{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:11px; padding:10px; min-height:40px;
  border-radius:11px; background:#25D366; color:#0B3D22;
  font-weight:700; font-size:13px; letter-spacing:.01em;
  transition:filter .18s;
}
.wsp:hover{filter:brightness(1.06)}
.wsp:active{transform:scale(.985)}

/* cuántas fotos tiene, como en los portales: dice cuánto hay para ver sin entrar */
.cuenta-fotos{
  position:absolute; left:10px; bottom:10px; z-index:1;
  display:flex; align-items:center; gap:5px;
  padding:4px 8px; border-radius:7px;
  background:rgba(19,17,16,.72); color:#F7F5F2;
  font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
  backdrop-filter:blur(6px);
}

.nota-f{margin:10px 15px 0; font-size:12px; line-height:1.45; color:var(--tinta-3)}

/* ═══ CARGA DE FOTOS ═══ */
.fotos-carga{padding:16px 15px 0; border-top:1px solid var(--linea); margin-top:15px}
.tira-fotos{display:flex; gap:8px; overflow-x:auto; padding:11px 0 2px; scrollbar-width:none}
.tira-fotos::-webkit-scrollbar{display:none}
.tira-fotos:empty{display:none}
.foto-elegida{
  position:relative; flex:0 0 auto; width:86px; height:86px;
  border-radius:11px; overflow:hidden; border:1px solid var(--linea); background:var(--sup-2);
}
.foto-elegida img{width:100%; height:100%; object-fit:cover}
.es-portada{
  position:absolute; left:0; right:0; bottom:0; padding:3px 0;
  background:rgba(19,17,16,.78); color:#F7F5F2;
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-align:center;
}
/* la X: 26px, que con el dedo en una miniatura de 86 no se acierta menos */
.quitar-foto{
  position:absolute; right:3px; top:3px; width:26px; height:26px; border-radius:50%;
  background:rgba(19,17,16,.72); color:#F7F5F2; font-size:17px; line-height:1;
  display:grid; place-items:center; backdrop-filter:blur(4px);
}
.quitar-foto:hover{background:var(--alerta)}
.sumar-foto{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:11px; padding:13px; min-height:46px; cursor:pointer;
  border:1px dashed var(--metal); border-radius:12px;
  color:var(--metal); font-size:13.5px; font-weight:600;
}
.sumar-foto:hover{background:color-mix(in srgb, var(--metal) 8%, transparent)}

/* ═══ ESCRITORIO ═══
   Hasta acá el sitio era un celular dibujado en el medio de la pantalla: lindo para
   mostrar una maqueta, inútil como portal. La gente compara propiedades en pantalla
   grande y Google indexa esta versión.

   Va DESPUÉS del bloque de 900px de más arriba y con el mismo punto de corte, para
   pisarlo entero en vez de pelearle regla por regla.

   La barra de navegación no se mueve de sitio en el HTML —las pruebas y el JS la
   buscan donde está—: se la sube con `order`. Misma estructura, otra disposición. */
@media (min-width:900px){
  html, body{height:auto}
  body{padding:0; min-height:100vh; overflow-y:auto}
  #piedra-fondo{display:none}          /* la piedra existía para enmarcar el celular */

  .marco{
    max-width:none; width:100%; height:auto; min-height:100vh;
    border-radius:0; box-shadow:none; overflow:visible;
  }
  .lienzo{overflow:visible; flex:none}

  /* cabecera fija, ancha, con el contenido centrado */
  .tope{
    position:sticky; top:0; z-index:10;
    padding:14px max(24px, calc((100vw - 1240px) / 2)) 12px;
  }
  .sello b{font-size:20px}
  .sello .marca{width:24px; height:24px}

  /* la barra pasa a ser navegación horizontal arriba, debajo de la cabecera */
  .barra{
    order:-1; position:sticky; top:60px; z-index:9;
    border-top:0; border-bottom:1px solid var(--borde-piedra);
    padding:0 max(24px, calc((100vw - 1240px) / 2));
    justify-content:flex-start; gap:4px;
  }
  .barra button{
    flex:0 0 auto; flex-direction:row; gap:8px;
    padding:13px 16px; font-size:13.5px; letter-spacing:.01em;
    border-bottom:2px solid transparent; border-radius:0;
  }
  .barra button svg{width:17px; height:17px}
  .barra button[aria-current="page"]{border-bottom-color:var(--metal)}
  .globo{position:static; margin-left:2px}

  /* portada: banner ancho, no una tarjeta de celular */
  .portada{height:min(62vh, 520px)}
  .portada .contenido{padding:0 max(24px, calc((100vw - 1240px) / 2)) 40px}
  .placa{max-width:560px; padding:30px 32px 34px}
  .placa h1{font-size:44px}
  .placa p{font-size:15px; max-width:44ch}

  /* buscador: una sola fila de cuatro, como en cualquier portal */
  .buscador{
    max-width:1240px; margin:20px auto 0;
    padding:10px; display:flex; gap:8px; align-items:stretch;
  }
  .buscador .fila{display:contents}
  .buscador .campo{flex:1 1 0; min-width:0}
  .buscar-btn{width:auto; flex:0 0 auto; margin-top:0; padding:14px 26px}

  /* el corazón del asunto: la grilla */
  .seccion{max-width:1240px; margin:0 auto; padding:30px 24px 0}
  #lista-props{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; align-items:start}
  .tarjeta{margin-bottom:0}
  .tarjeta .dir{font-size:21px}

  /* el mapa gana alto, que es lo que le faltaba */
  .mapa-caja{max-width:1240px; margin:0 auto; border-radius:16px; overflow:hidden}
  .leyenda-mapa{max-width:1240px; margin:0 auto}

  /* ficha, formularios y bloques: ancho de lectura, no ancho de pantalla */
  .ficha-tope, .grilla-datos, .duenio, .bloque, .progreso,
  .metricas, .canon, .instalar, .legal, .capitulos, .hilo,
  .escribir, .sugerencias, .chat-tope{
    max-width:900px; margin-left:auto; margin-right:auto;
  }
  .visor{max-width:900px; margin:0 auto; border-radius:16px}
}

@media (min-width:1300px){
  #lista-props{grid-template-columns:repeat(3, 1fr)}
}

@media (min-width:900px){
  /* order:-1 sola ponía la navegación ARRIBA de la cabecera. La cabecera manda. */
  .tope{order:-2}
  .barra{order:-1}
}
/* Una hoja cerrada se traslada fuera de pantalla, pero con el cuerpo desplazable del
   escritorio el 102% no siempre alcanza y asomaba en medio de la grilla. Que además
   sea invisible e intocable mientras está cerrada. */
.hoja:not(.abierta){visibility:hidden; pointer-events:none}
.hoja.abierta{visibility:visible; pointer-events:auto}

/* aviso de la dirección: dice si la vamos a poder poner en el mapa, antes de guardar */
.aviso-dir{display:block; font-size:12px; line-height:1.4; margin-top:5px; min-height:0}
.aviso-dir:empty{display:none}
.aviso-dir.buscando{color:var(--tinta-3)}
.aviso-dir.hallada{color:var(--ok)}
.aviso-dir.sin{color:var(--espera)}

/* ═══ LANDINGS POR BARRIO ═══
   Páginas estáticas: no cargan la app, se ven en cuanto llegan. Son la puerta desde
   Google, así que lo que importa es que abran rápido y se lean. */
body.landing{background:var(--fondo); color:var(--tinta); padding-bottom:40px}
.l-tope{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px max(20px, calc((100vw - 1100px) / 2));
  border-bottom:1px solid var(--borde-piedra); background:var(--sup);
}
.l-sello{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit}
.l-sello img{width:26px; height:25px; object-fit:contain}
.l-sello b{font-family:"Bodoni Moda",serif; font-size:17px; letter-spacing:.01em}
.l-volver{font-size:13px; color:var(--metal); text-decoration:none; font-weight:600; white-space:nowrap}
.l-volver:hover{text-decoration:underline}

.l-marco{max-width:1100px; margin:0 auto; padding:30px 20px 0}
.l-marco h1{font-family:"Bodoni Moda",serif; font-size:clamp(29px,5vw,42px); line-height:1.05; margin:6px 0 0; font-weight:500}
.l-bajada{margin:12px 0 0; color:var(--tinta-2); font-size:15px; max-width:60ch; line-height:1.55}

.l-lista{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr))}
.l-item a{
  display:block; text-decoration:none; color:inherit; overflow:hidden;
  background:var(--sup); border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); transition:transform .2s, box-shadow .2s;
}
.l-item a:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta)}
.l-item img{width:100%; height:190px; object-fit:cover; display:block; background:var(--sup-2)}
.l-txt{padding:14px 15px 16px}
.l-txt h2{font-family:"Bodoni Moda",serif; font-size:20px; font-weight:500; margin:0; line-height:1.2}
.l-sub{margin:3px 0 0; font-size:12.5px; color:var(--tinta-3)}
.l-precio{font-family:"Bodoni Moda",serif; font-size:22px; font-weight:500; margin:10px 0 0; font-variant-numeric:tabular-nums}
.l-precio .mes{font-family:"Archivo",sans-serif; font-size:11px; color:var(--tinta-3); margin-left:3px}
.l-datos{margin:4px 0 0; font-size:12.5px; color:var(--tinta-2)}
body.landing .legal{max-width:1100px; margin:34px auto 0; padding:16px 20px 0}
.l-otros{margin-top:34px; padding-top:22px; border-top:1px solid var(--linea)}
.l-otros > div{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.l-otros a{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:99px; border:1px solid var(--linea);
  color:var(--tinta-2); text-decoration:none; font-size:13.5px; transition:.2s;
}
.l-otros a:hover{border-color:var(--metal); color:var(--metal)}
.l-otros a b{font-variant-numeric:tabular-nums; color:var(--tinta-3); font-size:12px}
.pie-barrios{margin:22px 18px 0; text-align:center}
.pie-barrios a{font-size:13.5px; color:var(--metal); font-weight:600; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px}

/* "Avisame si aparece algo así": va debajo de buscar, en tono menor.
   Si compite con el botón de buscar, la gente busca menos. */
.avisame{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:7px; padding:11px; min-height:42px;
  border-radius:12px; border:1px dashed var(--metal); color:var(--metal);
  font-size:12.5px; font-weight:600; transition:.2s;
}
.avisame:hover{background:color-mix(in srgb, var(--metal) 8%, transparent)}
@media (min-width:900px){
  .avisame{width:auto; flex:0 0 auto; margin-top:0; padding:11px 18px}
}

/* Cuántas personas la vieron. Es prueba social para el que busca y, sobre todo, la
   prueba que necesita el propietario de que su aviso se mueve. Va discreta, en gris:
   si compite con el precio, estorba. Sólo aparece con más de 20 — un "3" no dice
   nada bueno de una propiedad. */
.cuenta-vistas{
  position:absolute; right:10px; bottom:10px; z-index:1;
  padding:4px 9px; border-radius:7px;
  background:rgba(19,17,16,.62); color:#E4DED7;
  font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
  backdrop-filter:blur(6px);
}

/* ═══ DOCUMENTACIÓN RESERVADA ═══ */
.lista-docs-duenio{display:flex; flex-direction:column; gap:7px; margin-top:8px}
.lista-docs-duenio .check{padding:10px 12px}
.lista-docs-duenio .mia{border-bottom:1px solid var(--linea); padding:10px 0; gap:9px}
.lista-docs-duenio .mia:last-child{border-bottom:0}
.lista-docs-duenio .mia b{font-family:"Bodoni Moda",serif; font-size:16px; letter-spacing:.08em}

.docs-btn{
  padding:7px 11px; border-radius:9px; font-size:12px; font-weight:600;
  border:1px solid var(--metal); color:var(--metal); white-space:nowrap; transition:.2s;
}
.docs-btn:hover{background:color-mix(in srgb, var(--metal) 10%, transparent)}

/* con código, el documento deja de ser una fila muerta y pasa a ser un botón */
.doc.abrible{width:100%; text-align:left; cursor:pointer; transition:.18s}
.doc.abrible:hover{background:var(--sup-2)}
.doc.abrible .candado{color:var(--metal); font-weight:600}