/* Andes Propiedades — vitrina del catálogo (demo PHP)
   Paleta: azul #03598D · verde #008040 · turquesa #3DE4CB */

:root{
  --azul:#03598D;
  --verde:#008040;
  --turquesa:#3DE4CB;
  --tinta:#0f1b24;
  --gris:#5b6b77;
  --linea:#dde5ea;
  --fondo:#f6f9fa;
  --blanco:#fff;
  --radio:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--tinta);
  background:var(--blanco);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0 0 .4em;line-height:1.18}

/* ---------- cabecera ---------- */
.cabecera{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 28px;border-bottom:1px solid var(--linea);
  position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:20;
}
.marca{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-.2px}
.marca strong{color:var(--azul)}
.marca-icono{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--azul);color:var(--turquesa);font-size:15px;
}
.menu{display:flex;gap:22px;font-size:15px}
.menu a{color:var(--gris);font-weight:600}
.menu a:hover{color:var(--azul)}

/* ---------- portada ---------- */
.portada{
  padding:54px 28px 42px;
  background:linear-gradient(160deg,#0a4f7d 0%,var(--azul) 55%,#0b6f7a 100%);
  color:#eaf6fb;
}
.portada h1{font-size:clamp(26px,4vw,42px);max-width:14ch;color:#fff}
.portada p{max-width:52ch;color:#c9e5f0;margin:0 0 26px}

.buscador{
  display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;
  background:var(--blanco);padding:12px;border-radius:16px;
  max-width:900px;box-shadow:0 18px 40px rgba(3,40,60,.25);
}
.buscador input,.buscador select{
  border:1px solid var(--linea);border-radius:10px;padding:12px 14px;
  font-size:15px;color:var(--tinta);background:var(--blanco);width:100%;
}
.buscador input:focus,.buscador select:focus{outline:2px solid var(--turquesa);outline-offset:1px}
.buscador button{
  border:0;border-radius:10px;padding:12px 22px;font-size:15px;font-weight:700;
  background:var(--verde);color:#fff;cursor:pointer;
}
.buscador button:hover{background:#006e37}

/* ---------- contenido ---------- */
.contenedor{max-width:1180px;margin:0 auto;padding:34px 28px 60px}
.resultado-barra{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:22px;
}
.resultado-barra h2{font-size:20px;color:var(--gris);font-weight:600;margin:0}
.chips{display:flex;gap:8px}
.chip{
  padding:8px 16px;border-radius:999px;border:1px solid var(--linea);
  font-size:14px;font-weight:600;color:var(--gris);background:var(--blanco);
}
.chip.activo{background:var(--azul);border-color:var(--azul);color:#fff}

.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.tarjeta{
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  background:var(--blanco);transition:transform .16s ease,box-shadow .16s ease;
}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(3,40,60,.12)}
.tarjeta-cuerpo{padding:16px 18px 18px}
.precio{font-size:20px;font-weight:800;color:var(--azul);margin:0 0 6px}
.precio.grande{font-size:30px}
.tarjeta h3{font-size:16px;font-weight:600;margin-bottom:6px}
.ubicacion{color:var(--gris);font-size:14px;margin:0 0 12px}
.datos{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;padding:0;margin:0;font-size:13.5px;color:var(--gris)}
.datos li{display:flex;align-items:center;gap:5px}
.datos li::before{content:"·";color:var(--turquesa);font-weight:900}

/* ---------- foto genérica ---------- */
.foto{
  position:relative;aspect-ratio:16/10;display:grid;place-items:center;
  background:linear-gradient(150deg,#e8f4f8 0%,#d7ecf1 60%,#cbe7e2 100%);
  color:#9dc6d3;border-bottom:1px solid var(--linea);
}
.foto.grande{aspect-ratio:4/3;border-radius:var(--radio);border:1px solid var(--linea)}
.foto-icono{width:44%;height:auto;opacity:.55}
.foto-etiqueta{
  position:absolute;top:12px;left:12px;background:var(--blanco);
  color:var(--azul);font-size:12px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;padding:6px 12px;border-radius:999px;
  box-shadow:0 4px 12px rgba(3,40,60,.14);
}

/* ---------- ficha ---------- */
.ficha{padding-top:26px}
.volver{display:inline-block;color:var(--gris);font-size:14px;margin-bottom:18px}
.volver:hover{color:var(--azul)}
.ficha-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:start}
.etiqueta-operacion{
  display:inline-block;margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--verde);
}
.ficha-datos h1{font-size:clamp(22px,2.6vw,30px)}
.datos-ficha{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none;padding:0;margin:22px 0;
}
.datos-ficha li{
  display:flex;justify-content:space-between;gap:12px;
  border:1px solid var(--linea);border-radius:10px;padding:11px 14px;font-size:14px;
}
.datos-ficha span{color:var(--gris)}
.acciones{display:flex;gap:12px;margin-top:8px}
.descripcion{margin-top:40px;border-top:1px solid var(--linea);padding-top:24px}
.descripcion p{max-width:70ch;color:#25333d}

/* ---------- pie ---------- */
.pie{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:36px 28px;border-top:1px solid var(--linea);background:var(--fondo);
}
.pie p{margin:4px 0 0;color:var(--gris);font-size:14px}
.boton-wa{
  display:inline-block;background:var(--verde);color:#fff;font-weight:700;
  padding:12px 22px;border-radius:10px;font-size:15px;
}
.boton-wa:hover{background:#006e37}
.vacio{padding:40px 0;color:var(--gris)}

/* ---------- móvil ---------- */
@media (max-width:820px){
  .cabecera{padding:14px 18px}
  .menu{gap:16px;font-size:14px}
  .portada{padding:38px 18px 30px}
  .buscador{grid-template-columns:1fr;padding:14px}
  .contenedor{padding:26px 18px 48px}
  .ficha-grid{grid-template-columns:1fr;gap:22px}
  .pie{padding:28px 18px}
}