/* ============================================================
   CLASIFICADOS CONCRETA — hoja de estilos
   Paleta y tipografía heredadas del sitio principal de Concreta.
   ============================================================ */

:root{
  --verde: #4BAB2E;
  --verde-oscuro: #3d8a24;
  --verde-suave: #eaf5e6;
  --gris-oscuro: #3D4347;
  --gris-carbon: #262a2c;
  --crema: #F7F6F2;
  --blanco: #FFFFFF;
  --linea: #dcdfd8;
  --texto: #2c3033;
  --texto-suave: #6b7075;

  --fuente-titulo: 'Barlow Condensed', sans-serif;
  --fuente-cuerpo: 'Barlow', sans-serif;
  --fuente-tecnica: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--fuente-cuerpo);
  background: var(--crema);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family: inherit; }

.contenedor{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Encabezado ---------- */
.encabezado{
  background: var(--gris-carbon);
  position: sticky; top:0; z-index: 40;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.encabezado .contenedor{
  display:flex; align-items:center; justify-content:space-between;
  height: 74px;
}
.marca{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.marca img{ height: 38px; width:auto; }
.marca-texto{ display:flex; flex-direction:column; line-height:1; }
.marca-texto strong{
  font-family: var(--fuente-titulo); color:#fff;
  font-size: 22px; letter-spacing:.5px; font-weight:600;
}
.marca-texto span{ color: var(--verde); font-size:11px; letter-spacing:2px; }

.nav-principal{ display:flex; align-items:center; gap: 28px; }
.nav-principal a{
  text-decoration:none; color:#d7d9d8; font-size:15px;
  font-family: var(--fuente-cuerpo); font-weight:500;
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-principal a:hover{ color:#fff; }
.nav-principal a.activo{ color:#fff; border-color: var(--verde); }
.nav-whatsapp{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--verde); color:#fff !important;
  padding: 9px 16px; border-radius: 3px; font-weight:600;
  font-size:14px;
}
.nav-whatsapp:hover{ background: var(--verde-oscuro); }

/* ---------- Hero ---------- */
.hero{
  background: var(--gris-oscuro);
  color:#fff;
  padding: 56px 0 40px;
  position: relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 85%);
  pointer-events:none;
}
.hero .contenedor{ position:relative; }
.hero .rotulo{
  font-family: var(--fuente-tecnica);
  color: var(--verde);
  font-size: 12px; letter-spacing: 3px; text-transform:uppercase;
  display:block; margin-bottom: 10px;
}
.hero h1{
  font-family: var(--fuente-titulo);
  font-weight:600; text-transform:uppercase; letter-spacing:1px;
  font-size: clamp(34px, 5vw, 54px);
  margin: 0 0 12px;
  line-height:1;
}
.hero p{
  max-width: 620px; color:#c9cdc9; font-size:17px; line-height:1.55;
  margin:0;
}
.hero-contador{
  margin-top:26px; display:inline-flex; gap:10px; align-items:baseline;
  border:1px solid rgba(255,255,255,.18); padding:10px 18px;
  font-family: var(--fuente-tecnica); font-size:13px; color:#c9cdc9;
}
.hero-contador strong{
  color: var(--verde); font-family: var(--fuente-titulo);
  font-size:22px; font-weight:600;
}

/* ---------- Filtros ---------- */
.filtros-barra{
  background:#fff; border-bottom:1px solid var(--linea);
  position: sticky; top:74px; z-index: 30;
}
.toggle-filtros{
  display:none; width:100%; align-items:center; justify-content:space-between;
  background:none; border:none; padding: 14px 2px; cursor:pointer;
  font-family: var(--fuente-tecnica); font-size:12.5px; letter-spacing:1.5px;
  text-transform:uppercase; color: var(--gris-oscuro); font-weight:600;
}
.toggle-icono{ transition: transform .2s ease; color: var(--verde); font-size:16px; }
.toggle-filtros.abierto .toggle-icono{ transform: rotate(180deg); }
.filtros{
  display:flex; flex-wrap:wrap; gap:14px; align-items:end;
  padding: 16px 0;
}
.campo-filtro{ display:flex; flex-direction:column; gap:5px; }
.campo-filtro label{
  font-family: var(--fuente-tecnica); font-size:10.5px;
  letter-spacing:1.5px; text-transform:uppercase; color: var(--texto-suave);
}
.campo-filtro select, .campo-filtro input{
  border:1px solid var(--linea); background:#fff;
  padding: 9px 10px; font-size:14px; color: var(--texto);
  border-radius: 2px; font-family: var(--fuente-cuerpo);
  min-width: 130px;
}
.campo-filtro select:focus, .campo-filtro input:focus{
  outline:2px solid var(--verde); outline-offset:1px;
}
.filtros .limpiar{
  background:none; border:1px solid var(--gris-oscuro);
  color: var(--gris-oscuro); padding:9px 16px; font-size:13px;
  border-radius:2px; cursor:pointer; font-weight:600;
  height:38px; align-self:end;
}
.filtros .limpiar:hover{ background: var(--gris-oscuro); color:#fff; }
.ver-resultados{ display:none; }

/* ---------- Grid de propiedades ---------- */
.seccion-listado{ padding: 40px 0 80px; }
.grid-propiedades{
  display:grid; gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.tarjeta{
  background:#fff; border:1px solid var(--linea);
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.09); }

.tarjeta-media{
  position:relative; aspect-ratio: 4/3; overflow:hidden; background:#e9e9e6;
}
.tarjeta-media .carrusel-track{
  display:flex; height:100%; transition: transform .35s ease;
}
.tarjeta-media .carrusel-track img{
  width:100%; height:100%; object-fit:cover; flex-shrink:0;
}
/* esquinas tipo "plano técnico" — el detalle distintivo de la tarjeta */
.tarjeta-media::before, .tarjeta-media::after,
.marco-esquinas span{ pointer-events:none; }
.marco-esquinas{
  position:absolute; inset:10px; pointer-events:none;
  opacity:0; transition: opacity .18s ease, inset .18s ease;
}
.tarjeta:hover .marco-esquinas{ opacity:1; inset:7px; }
.marco-esquinas span{
  position:absolute; width:18px; height:18px; border-color: var(--verde);
  border-style:solid; border-width:0;
}
.marco-esquinas span:nth-child(1){ top:0; left:0; border-top-width:2px; border-left-width:2px; }
.marco-esquinas span:nth-child(2){ top:0; right:0; border-top-width:2px; border-right-width:2px; }
.marco-esquinas span:nth-child(3){ bottom:0; left:0; border-bottom-width:2px; border-left-width:2px; }
.marco-esquinas span:nth-child(4){ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }

.etiqueta-operacion{
  position:absolute; top:12px; left:12px;
  background: var(--gris-carbon); color:#fff;
  font-family: var(--fuente-tecnica); font-size:11px; letter-spacing:1.5px;
  padding: 5px 10px; text-transform:uppercase;
}
.etiqueta-operacion.venta{ background: var(--verde); }
.etiqueta-destacado{
  position:absolute; top:12px; right:12px;
  background:#fff; color: var(--gris-oscuro);
  font-family: var(--fuente-tecnica); font-size:10.5px; letter-spacing:1px;
  padding: 5px 9px; text-transform:uppercase; border:1px solid var(--gris-oscuro);
}

.carrusel-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  background:rgba(38,42,44,.55); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; opacity:0; transition:opacity .15s;
}
.tarjeta-media:hover .carrusel-nav{ opacity:1; }
.carrusel-nav.izq{ left:8px; } .carrusel-nav.der{ right:8px; }
.carrusel-puntos{
  position:absolute; bottom:10px; left:0; right:0;
  display:flex; gap:5px; justify-content:center;
}
.carrusel-puntos span{
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55);
}
.carrusel-puntos span.activo{ background:#fff; width:14px; border-radius:3px; }

.tarjeta-info{ padding: 18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tarjeta-ubicacion{
  font-family: var(--fuente-tecnica); font-size:11.5px; letter-spacing:1px;
  color: var(--texto-suave); text-transform:uppercase;
}
.tarjeta-titulo{
  font-family: var(--fuente-titulo); font-size:22px; font-weight:600;
  margin:0; line-height:1.15; color: var(--gris-oscuro);
}
.tarjeta-precio{
  font-family: var(--fuente-titulo); font-size:26px; font-weight:600;
  color: var(--verde-oscuro);
}
.tarjeta-precio small{ font-family: var(--fuente-tecnica); font-size:12px; color:var(--texto-suave); font-weight:400; }

.tarjeta-specs{
  display:flex; flex-wrap:wrap; gap:8px; margin: 2px 0 4px;
  border-top: 1px dashed var(--linea); padding-top: 12px;
}
.spec-chip{
  font-family: var(--fuente-tecnica); font-size:12px; color: var(--gris-oscuro);
  border:1px solid var(--linea); padding: 4px 8px; letter-spacing:.3px;
}

.tarjeta-acciones{ display:flex; gap:8px; margin-top:auto; padding-top: 6px; }
.btn{
  flex:1; text-align:center; text-decoration:none; cursor:pointer;
  padding: 11px 14px; font-size:14px; font-weight:600;
  border-radius: 2px; border:1px solid transparent;
  font-family: var(--fuente-cuerpo);
}
.btn-detalle{ background: var(--crema); color: var(--gris-oscuro); border-color: var(--linea); }
.btn-detalle:hover{ border-color: var(--gris-oscuro); }
.btn-whatsapp{ background: var(--verde); color:#fff; }
.btn-whatsapp:hover{ background: var(--verde-oscuro); }

/* ---------- Estado vacío ---------- */
.estado-vacio{
  text-align:center; padding: 70px 20px; color: var(--texto-suave);
}
.estado-vacio strong{
  display:block; font-family: var(--fuente-titulo); font-size:26px;
  color: var(--gris-oscuro); margin-bottom:8px; text-transform:uppercase;
}

/* ---------- Modal de detalle ---------- */
.modal-fondo{
  position:fixed; inset:0; background:rgba(20,22,23,.72);
  display:none; align-items:center; justify-content:center;
  z-index: 100; padding: 24px;
}
.modal-fondo.abierto{ display:flex; }
.modal{
  background:#fff; max-width: 920px; width:100%; max-height: 88vh;
  overflow-y:auto; position:relative;
}
.modal-cerrar{
  position:absolute; top:14px; right:14px; z-index:5;
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(38,42,44,.75); color:#fff; font-size:18px; cursor:pointer;
}
.modal-media{ position:relative; aspect-ratio: 16/9; background:#e9e9e6; cursor: zoom-in; }
.modal-media img{ width:100%; height:100%; object-fit:cover; }
.modal-zoom-hint{
  position:absolute; bottom:12px; right:14px;
  background:rgba(20,22,23,.65); color:#fff; font-size:12px;
  padding:6px 11px; border-radius:20px; pointer-events:none;
}

/* ---------- Visor de fotos a pantalla completa ---------- */
.lightbox-fondo{
  position:fixed; inset:0; background:rgba(10,11,12,.96);
  display:none; align-items:center; justify-content:center;
  z-index: 200; touch-action: pinch-zoom;
}
.lightbox-fondo.abierto{ display:flex; }
.lightbox-visor{
  width:100%; height:100%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  touch-action: pinch-zoom;
}
.lightbox-visor img{
  max-width:94%; max-height:94vh; object-fit:contain;
  transition: transform .2s ease; cursor: zoom-in;
  touch-action: pinch-zoom;
}
.lightbox-visor img.zoom{ cursor: zoom-out; }
.lightbox-cerrar{
  position:absolute; top:18px; right:18px; z-index:5;
  width:42px; height:42px; border-radius:50%; border:none;
  background:rgba(255,255,255,.12); color:#fff; font-size:20px; cursor:pointer;
}
.lightbox-cerrar:hover{ background:rgba(255,255,255,.22); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:none;
  background:rgba(255,255,255,.12); color:#fff; font-size:24px; cursor:pointer;
  z-index:5;
}
.lightbox-nav:hover{ background:rgba(255,255,255,.22); }
.lightbox-nav.izq{ left:16px; } .lightbox-nav.der{ right:16px; }
.lightbox-contador{
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  color:rgba(255,255,255,.7); font-family: var(--fuente-tecnica); font-size:12.5px;
}
@media (max-width:600px){
  .lightbox-nav{ width:38px; height:38px; font-size:20px; }
  .lightbox-cerrar{ width:38px; height:38px; }
}
.modal-cuerpo{ padding: 28px 30px 32px; }
.modal-cuerpo .tarjeta-ubicacion{ margin-bottom:4px; }
.modal-cuerpo h2{
  font-family: var(--fuente-titulo); font-size:30px; font-weight:600;
  margin:0 0 6px; color: var(--gris-oscuro);
}
.modal-cuerpo .tarjeta-precio{ margin-bottom: 14px; display:block; }
.modal-descripcion{
  white-space: pre-line; line-height:1.6; color: var(--texto);
  border-top:1px solid var(--linea); padding-top:16px; margin-top:4px;
}
.modal-acciones{ margin-top:22px; display:flex; gap:10px; }
.modal-acciones .btn{ flex:none; padding: 12px 26px; }

/* ---------- Pie ---------- */
.pie{ background: var(--gris-carbon); color:#c9cdc9; padding: 34px 0; margin-top: 30px; }
.pie .contenedor{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-size:13.5px;
}
.pie a{ color: var(--verde); text-decoration:none; }
.pie-admin{ color:#8f9490 !important; margin-left:4px; }
.pie-admin:hover{ color:#fff !important; }

/* ---------- WhatsApp flotante ---------- */
.wpp-flotante{
  position:fixed; bottom:22px; right:22px; z-index:50;
  background: var(--verde); color:#fff; width:56px; height:56px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.wpp-flotante:hover{ background: var(--verde-oscuro); }
.wpp-flotante svg{ width:28px; height:28px; }

/* ---------- Responsivo ---------- */
@media (max-width: 760px){
  .nav-principal{ display:none; }
  .filtros-barra{ top:66px; }
  .encabezado .contenedor{ height:66px; }
  .toggle-filtros{ display:flex; }
  .filtros{
    display:none; flex-direction:column; align-items:stretch;
    padding-top:0; padding-bottom:16px;
  }
  .filtros.abierto{ display:flex; }
  .campo-filtro select, .campo-filtro input{ min-width:0; width:100%; }
  .filtros .limpiar{ width:100%; }
  .ver-resultados{
    display:block; width:100%; margin-top:4px;
    background: var(--verde); color:#fff; border:none;
    padding:12px 16px; font-size:14px; border-radius:2px;
    font-weight:700; cursor:pointer;
  }
  .ver-resultados:hover{ background: var(--verde-oscuro); }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}