/* =========================================================
   ECILA PROPIEDADES — sistema de diseño
   Dirección de arte: "catastro / plano de mensura"
   Paleta: crema papel + carbón + oliva profundo + ocre viejo
   Tipografía: Fraunces (display) + Archivo (texto) + JetBrains Mono (datos)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --crema:      #F1ECE1;
  --crema-alta: #FAF7F0;
  --carbon:     #211F1B;
  --carbon-70:  rgba(33,31,27,.72);
  --carbon-40:  rgba(33,31,27,.4);
  --carbon-15:  rgba(33,31,27,.15);
  --oliva:      #4B5A3F;
  --oliva-alta: #647653;
  --ocre:       #A9812F;
  --ladrillo:   #8C3B2E;
  --linea:      rgba(33,31,27,.22);

  --display: 'Fraunces', serif;
  --texto: 'Archivo', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --radio: 0px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--crema);
  color:var(--carbon);
  font-family:var(--texto);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:16px; }

.wrap{ max-width:1240px; margin:0 auto; padding:0 28px; }

/* ---------- marca de agua catastral (elemento firma) ---------- */
.marca-corner{ position:relative; }
.marca-corner::before,
.marca-corner::after{
  content:""; position:absolute; width:9px; height:9px;
  border-top:1.5px solid var(--carbon); border-left:1.5px solid var(--carbon);
  top:-1px; left:-1px;
}
.marca-corner::after{ top:auto; left:auto; bottom:-1px; right:-1px;
  border-top:none; border-left:none;
  border-bottom:1.5px solid var(--carbon); border-right:1.5px solid var(--carbon);
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--crema-alta);
  border-bottom:1.5px solid var(--carbon);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.logo{ font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:.02em; }
.logo small{
  display:block; font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.18em; color:var(--oliva); text-transform:uppercase; margin-top:2px;
}
.nav{ display:flex; align-items:center; gap:32px; }
.nav a{ font-size:14px; font-weight:500; position:relative; padding:4px 0; }
.nav a.activo{ color:var(--oliva); }
.nav a.activo::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--oliva);
}
.btn-admin{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1.5px solid var(--carbon); padding:9px 16px; color:var(--carbon);
}
.btn-admin:hover{ background:var(--carbon); color:var(--crema); }
.nav-toggle{ display:none; }

/* ---------- hero / buscador ---------- */
.hero{ border-bottom:1.5px solid var(--carbon); }
.hero-grid{
  display:grid; grid-template-columns:1.1fr 1.4fr; gap:0;
  min-height:340px;
}
.hero-izq{
  padding:56px 28px 40px 0;
  display:flex; flex-direction:column; justify-content:center;
  border-right:1.5px solid var(--carbon);
}
.hero-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oliva); margin:0 0 18px;
}
.hero-izq h1{
  font-family:var(--display); font-weight:500; font-size:clamp(34px,4vw,52px);
  line-height:1.05; margin:0 0 18px;
}
.hero-izq h1 em{ font-style:italic; color:var(--oliva); }
.hero-izq p{ color:var(--carbon-70); font-size:15px; max-width:38ch; margin:0; }

.hero-der{ padding:40px 0 40px 44px; display:flex; flex-direction:column; justify-content:center; }
.buscador{ border:1.5px solid var(--carbon); background:var(--crema-alta); padding:22px; }
.op-tabs{ display:flex; border-bottom:1px solid var(--linea); margin-bottom:18px; }
.op-tabs button{
  flex:1; background:none; border:none; padding:10px 4px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--carbon-40); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.op-tabs button.activo{ color:var(--carbon); border-bottom-color:var(--oliva); }
.campos-buscador{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.campo label{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--carbon-40); margin-bottom:6px;
}
.campo select, .campo input{
  width:100%; border:1px solid var(--carbon-15); background:var(--crema);
  padding:10px 10px; font-size:14px; color:var(--carbon);
}
.campo select:focus, .campo input:focus{ outline:none; border-color:var(--oliva); }
.rango-precio{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.btn-buscar{
  grid-column:1/-1; margin-top:4px;
  background:var(--carbon); color:var(--crema); border:none; padding:13px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}
.btn-buscar:hover{ background:var(--oliva); }

/* ---------- listado ---------- */
.section-title{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:36px 0 20px; border-bottom:1px solid var(--linea); margin-bottom:28px;
}
.section-title h2{ font-family:var(--display); font-weight:500; font-size:26px; margin:0; }
.section-title .conteo{ font-family:var(--mono); font-size:12px; color:var(--carbon-40); }

.listado-layout{ display:grid; grid-template-columns:250px 1fr; gap:40px; padding-bottom:70px; }
.filtros{ border-right:1px solid var(--linea); padding-right:28px; }
.filtro-grupo{ margin-bottom:28px; }
.filtro-grupo h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--carbon-40); margin:0 0 12px; padding-bottom:8px; border-bottom:1px dashed var(--linea);
}
.filtro-check{ display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:13.5px; }
.filtro-check input{ accent-color:var(--oliva); width:14px; height:14px; }
.rango-inputs{ display:flex; align-items:center; gap:8px; }
.rango-inputs input{
  width:100%; border:1px solid var(--carbon-15); background:var(--crema-alta);
  padding:8px; font-size:13px; font-family:var(--mono);
}
.rango-inputs span{ color:var(--carbon-40); font-size:12px; }
.btn-limpiar{
  width:100%; margin-top:6px; background:none; border:1px solid var(--carbon-15);
  padding:9px; font-size:12px; color:var(--carbon-70);
}
.btn-limpiar:hover{ border-color:var(--carbon); color:var(--carbon); }

.grid-propiedades{
  display:grid; grid-template-columns:repeat(2,1fr); gap:26px;
}
.card-prop{
  border:1.5px solid var(--carbon); background:var(--crema-alta);
  display:flex; flex-direction:column; position:relative;
}
.card-prop .foto{
  aspect-ratio:4/3; overflow:hidden; border-bottom:1.5px solid var(--carbon); position:relative;
}
.card-prop .foto img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card-prop:hover .foto img{ transform:scale(1.04); }
.lote-tag{
  position:absolute; top:10px; left:10px; background:var(--carbon); color:var(--crema);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; padding:5px 9px;
}
.badge-op{
  position:absolute; top:10px; right:10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; color:#fff;
}
.badge-op.venta{ background:var(--oliva); }
.badge-op.alquiler{ background:var(--ocre); }
.card-cuerpo{ padding:18px 18px 20px; flex:1; display:flex; flex-direction:column; }
.card-cuerpo .precio{ font-family:var(--display); font-size:22px; font-weight:600; margin:0 0 4px; }
.card-cuerpo .precio span{ font-family:var(--mono); font-size:11px; color:var(--oliva); margin-left:4px; }
.card-cuerpo .titulo{ font-size:14.5px; font-weight:600; margin:0 0 4px; }
.card-cuerpo .ubi{ font-size:12.5px; color:var(--carbon-70); margin:0 0 14px; }
.specs-linea{
  display:flex; gap:14px; padding-top:12px; border-top:1px dashed var(--linea);
  font-family:var(--mono); font-size:11.5px; color:var(--carbon-70); margin-top:auto;
}
.specs-linea b{ color:var(--carbon); font-weight:500; }

.sin-resultados{
  grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--carbon-40);
  font-family:var(--mono); font-size:13px; border:1px dashed var(--linea);
}

/* ---------- footer ---------- */
.site-footer{ border-top:1.5px solid var(--carbon); background:var(--carbon); color:var(--crema); margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding:52px 0 30px; }
.footer-grid h3{ font-family:var(--display); font-size:22px; font-weight:500; margin:0 0 12px; }
.footer-grid p{ color:rgba(241,236,225,.6); font-size:13.5px; max-width:34ch; }
.footer-col h5{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(241,236,225,.5); margin:0 0 14px;
}
.footer-col a, .footer-col p{ display:block; font-size:13.5px; color:rgba(241,236,225,.85); margin-bottom:9px; }
.footer-col a:hover{ color:var(--ocre); }
.footer-bottom{
  border-top:1px solid rgba(241,236,225,.15); padding:16px 0; font-family:var(--mono);
  font-size:11px; color:rgba(241,236,225,.4); display:flex; justify-content:space-between;
}

/* ---------- página de detalle ---------- */
.migas{ padding:18px 0; font-size:12.5px; color:var(--carbon-40); font-family:var(--mono); }
.migas a:hover{ color:var(--oliva); }

.detalle-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:44px; padding-bottom:70px; }
.galeria-principal{
  aspect-ratio:16/10; border:1.5px solid var(--carbon); overflow:hidden; margin-bottom:10px; position:relative;
}
.galeria-principal img{ width:100%; height:100%; object-fit:cover; }
.galeria-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:var(--crema-alta);
  border:1.5px solid var(--carbon); width:38px; height:38px; display:flex; align-items:center; justify-content:center;
}
.galeria-nav.prev{ left:12px; } .galeria-nav.next{ right:12px; }
.galeria-miniaturas{ display:flex; gap:8px; flex-wrap:wrap; }
.galeria-miniaturas img{
  width:82px; height:62px; object-fit:cover; border:1.5px solid var(--carbon-15); opacity:.65;
}
.galeria-miniaturas img.activa{ border-color:var(--oliva); opacity:1; }

.detalle-cabecera{ display:flex; justify-content:space-between; align-items:flex-start; margin:28px 0 10px; gap:20px; }
.detalle-cabecera h1{ font-family:var(--display); font-weight:500; font-size:30px; margin:0 0 8px; }
.detalle-cabecera .ubi{ font-size:14px; color:var(--carbon-70); }
.detalle-precio{ text-align:right; white-space:nowrap; }
.detalle-precio .monto{ font-family:var(--display); font-size:28px; font-weight:600; }
.detalle-precio .op{ font-family:var(--mono); font-size:11px; color:var(--oliva); text-transform:uppercase; letter-spacing:.08em; }

.specs-grid{
  display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--carbon); margin:26px 0;
}
.specs-grid div{ padding:16px 14px; border-right:1px solid var(--linea); }
.specs-grid div:last-child{ border-right:none; }
.specs-grid .num{ font-family:var(--mono); font-size:19px; font-weight:500; }
.specs-grid .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--carbon-40); margin-top:3px; }

.bloque{ margin-bottom:34px; }
.bloque h3{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--oliva); border-bottom:1px dashed var(--linea); padding-bottom:10px; margin:0 0 14px;
}
.bloque .desc{ font-size:15px; line-height:1.7; color:var(--carbon-70); white-space:pre-line; }
#mapa{ height:280px; border:1.5px solid var(--carbon); }

.panel-lateral{ position:sticky; top:96px; align-self:start; }
.tarjeta-contacto{ border:1.5px solid var(--carbon); background:var(--crema-alta); padding:24px; margin-bottom:20px; }
.tarjeta-contacto h4{ font-family:var(--display); font-size:19px; margin:0 0 6px; }
.tarjeta-contacto p{ font-size:13px; color:var(--carbon-70); margin:0 0 18px; }
.btn-wsp{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--oliva); color:#fff; border:none; padding:13px; width:100%;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; margin-bottom:10px;
}
.btn-wsp:hover{ background:#3c4832; }
.btn-tel{
  display:block; text-align:center; border:1.5px solid var(--carbon); padding:12px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em;
}
.ficha-mini{ font-family:var(--mono); font-size:11.5px; color:var(--carbon-40); border-top:1px dashed var(--linea); padding-top:14px; margin-top:16px; }
.ficha-mini div{ display:flex; justify-content:space-between; margin-bottom:6px; }

/* ---------- admin ---------- */
.admin-login{ max-width:380px; margin:90px auto; }
.admin-login .marca-corner{ border:1.5px solid var(--carbon); padding:40px 32px; background:var(--crema-alta); }
.admin-login h2{ font-family:var(--display); font-size:24px; margin:0 0 6px; }
.admin-login p{ font-size:13px; color:var(--carbon-70); margin:0 0 24px; }
.admin-login label, .form-propiedad label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--carbon-40); margin:0 0 6px;
}
.admin-login input{
  width:100%; border:1px solid var(--carbon-15); padding:11px; margin-bottom:16px; background:var(--crema);
}
.admin-login .error{ color:var(--ladrillo); font-size:12.5px; margin-bottom:12px; display:none; }

.admin-topbar{
  background:var(--carbon); color:var(--crema); border-bottom:1.5px solid var(--carbon);
}
.admin-topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:64px; }
.admin-topbar .logo{ color:var(--crema); font-size:19px; }
.admin-topbar a, .admin-topbar button{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(241,236,225,.8); background:none; border:1px solid rgba(241,236,225,.3); padding:8px 14px;
}
.admin-topbar a:hover, .admin-topbar button:hover{ border-color:var(--crema); color:var(--crema); }

.admin-layout{ padding:36px 0 80px; }
.admin-tabs{ display:flex; gap:6px; border-bottom:1.5px solid var(--carbon); margin-bottom:30px; }
.admin-tabs button{
  background:none; border:none; padding:12px 20px; font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--carbon-40); border-bottom:2px solid transparent; margin-bottom:-1.5px;
}
.admin-tabs button.activo{ color:var(--carbon); border-bottom-color:var(--oliva); }

.form-propiedad{ max-width:760px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full{ grid-column:1/-1; }
.form-propiedad input, .form-propiedad select, .form-propiedad textarea{
  width:100%; border:1px solid var(--carbon-15); background:var(--crema-alta); padding:11px;
}
.form-propiedad textarea{ min-height:130px; resize:vertical; font-family:var(--texto); }
.form-propiedad .campo{ margin-bottom:18px; }
.mapa-picker{ height:260px; border:1.5px solid var(--carbon); margin-bottom:8px; }
.coords-preview{ font-family:var(--mono); font-size:12px; color:var(--carbon-40); }
.pegar-maps{ display:flex; gap:10px; margin-bottom:8px; }
.pegar-maps input{
  flex:1; border:1px solid var(--carbon-15); background:var(--crema-alta); padding:11px; font-family:var(--mono); font-size:13px;
}
.pegar-maps button{ white-space:nowrap; padding:11px 18px; }
.pegar-maps-ayuda{ font-size:12px; color:var(--carbon-40); margin:0 0 12px; }
.coords-preview.ok{ color:var(--oliva); }
.coords-preview.error{ color:var(--ladrillo); }

.drop-imagenes{
  border:1.5px dashed var(--carbon-15); padding:26px; text-align:center; background:var(--crema-alta); cursor:pointer;
}
.drop-imagenes:hover{ border-color:var(--oliva); }
.drop-imagenes p{ font-size:13px; color:var(--carbon-70); margin:0; }
.drop-zone-error{ font-size:12.5px; color:var(--ladrillo); margin:8px 0 0; }
.medidor-barra{ height:6px; background:var(--carbon-15); margin-top:16px; overflow:hidden; }
.medidor-relleno{ height:100%; background:var(--oliva); transition:width .3s ease; }
.medidor-texto{ font-family:var(--mono); font-size:11px; color:var(--carbon-40); margin:6px 0 0; }
.medidor-texto.alerta{ color:var(--ladrillo); }
.previews-imagenes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.preview-img{ position:relative; width:90px; height:70px; }
.preview-img img{ width:100%; height:100%; object-fit:cover; border:1px solid var(--carbon-15); }
.preview-img button{
  position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%;
  background:var(--ladrillo); color:#fff; border:none; font-size:12px; line-height:1;
}

.btn-primario{
  background:var(--carbon); color:var(--crema); border:none; padding:14px 26px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
}
.btn-primario:hover{ background:var(--oliva); }
.btn-secundario{
  background:none; border:1.5px solid var(--carbon); padding:14px 26px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
}
.msg-guardado{
  display:none; background:var(--oliva); color:#fff; padding:12px 16px; font-size:13px; margin-top:16px;
}

.tabla-admin{ width:100%; border-collapse:collapse; }
.tabla-admin th{
  text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--carbon-40); border-bottom:1.5px solid var(--carbon); padding:10px 12px;
}
.tabla-admin td{ padding:12px; border-bottom:1px solid var(--linea); font-size:13.5px; vertical-align:middle; }
.tabla-admin img{ width:56px; height:42px; object-fit:cover; border:1px solid var(--carbon-15); }
.tabla-admin .acciones{ display:flex; gap:8px; }
.tabla-admin .acciones button{
  background:none; border:1px solid var(--carbon-15); padding:6px 10px; font-size:11px; font-family:var(--mono);
}
.tabla-admin .acciones button.borrar:hover{ border-color:var(--ladrillo); color:var(--ladrillo); }
.tabla-admin .acciones button.editar:hover{ border-color:var(--oliva); color:var(--oliva); }
.tabla-vacia{ padding:50px; text-align:center; color:var(--carbon-40); font-family:var(--mono); font-size:12.5px; border:1px dashed var(--linea); }

/* ---------- estadísticas ---------- */
.stats-resumen{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:16px; }
.stats-card{ border:1.5px solid var(--carbon); background:var(--crema-alta); padding:22px; }
.stats-num{ font-family:var(--display); font-size:36px; font-weight:600; }
.stats-lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--carbon-40); margin-top:6px; }
.stats-nota{ font-size:12.5px; color:var(--carbon-40); max-width:60ch; margin:0 0 26px; }
.stats-cargando{ font-family:var(--mono); font-size:12px; color:var(--carbon-40); }

/* ---------- utilidades ---------- */
.mono{ font-family:var(--mono); }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-izq{ border-right:none; border-bottom:1.5px solid var(--carbon); padding:40px 0 30px; }
  .hero-der{ padding:30px 0; }
  .listado-layout{ grid-template-columns:1fr; }
  .filtros{ border-right:none; border-bottom:1.5px solid var(--carbon); padding:0 0 24px; margin-bottom:24px; }
  .grid-propiedades{ grid-template-columns:1fr; }
  .detalle-layout{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; padding:40px 0 20px; }
  .form-grid{ grid-template-columns:1fr; }
  .specs-grid{ grid-template-columns:repeat(2,1fr); }
  .specs-grid div:nth-child(2){ border-right:none; }
  .nav{ display:none; }
}
@media (max-width: 560px){
  .site-header .wrap{ height:64px; }
  .campos-buscador{ grid-template-columns:1fr; }
  .rango-precio{ grid-template-columns:1fr; }
  .detalle-cabecera{ flex-direction:column; }
  .detalle-precio{ text-align:left; }
}