:root{
  --bg:#f5faf8;
  --panel:#ffffff;
  --text:#0f1a18;
  --muted:#6b7c77;
  --brand:#19B58C;
  --brand-500:#109D78;
  --brand-700:#0A7C60;
  --line:#e5efe9;
  --wa:#16a34a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--text)
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1160px;margin:0 auto;padding:0 18px}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;min-height:44px}
.logo-container{display:flex;align-items:center;gap:10px}
.logo-img{height:42px;width:auto;object-fit:contain;border-radius:6px}
.logo-text{font-weight:900;letter-spacing:.2px;color:var(--brand-700);font-size:1.1rem}
@media (max-width:480px){.logo-text{display:none}}
.menu{display:none;align-items:center;gap:16px}
.menu a{color:#2e3b37;font-weight:700}
.menu a:hover{color:var(--brand-700)}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#163a32}
.icon-link:hover{background:#eef7f3}
@media(min-width:900px){.menu{display:flex}}

/* BOTONES */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 18px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(25,181,140,.22)}
.btn--primary:hover{background:var(--brand-500)}
.btn--outline{border:1px solid #cfe5dc;background:#fff;color:#0f1a18}
.btn--outline:hover{background:#f7fcfa}

/* HERO */
.hero-split{position:relative;padding:36px 0 80px;background:linear-gradient(180deg,#f0f8f4 0%, #ffffff 100%)}
.hero-split__grid{display:grid;gap:28px;align-items:center;grid-template-columns:1fr}
@media(min-width:980px){.hero-split__grid{grid-template-columns:1.1fr .9fr}}
.hero-split__text h1{font-size:46px;line-height:1.06;margin:6px 0 10px;font-weight:900;letter-spacing:-.015em;color:#0d1f1b}
.hero-split__text .accent{color:var(--brand-700)}
.hero-split__text .lead{color:var(--muted);max-width:560px;font-weight:600}
.hero-split__text .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-split__media img{border-radius:22px;border:1px solid var(--line);box-shadow:0 16px 50px rgba(10,124,96,.12);object-fit:cover;height:420px;width:100%}

/* Tarjeta flotante */
.purpose-card{position:relative;z-index:5;margin:-32px auto 0;max-width:860px;background:linear-gradient(180deg,#f3fbf8 0%, #ffffff 100%);border:1px solid #cfe5dc;color:#0b3a30;padding:14px 16px;border-radius:16px;box-shadow:0 16px 40px rgba(25,181,140,.14);display:flex;gap:12px;align-items:flex-start}
.purpose-card__icon{min-width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#e8faf4;color:var(--brand-700)}
.purpose-card b{color:var(--brand-700)}

/* SECCIONES */
.section{padding:28px 0 60px}
.section__title{text-align:center;margin:0 auto 28px;max-width:860px}
.section__title h2{font-size:34px;margin:0 0 6px;font-weight:900;color:#143a31}
.h3{font-size:22px;margin:0 0 10px;font-weight:900}
.subtitle{color:var(--muted)}
.mt-40{margin-top:2.5rem}

/* SERVICIOS */
.section--tabs{background:#fff}
.tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.tab{padding:12px 24px;border:1px solid var(--line);border-radius:30px;cursor:pointer;background:#f7fcfa;font-weight:800;color:#0a7c60;transition:.2s}
.tab:hover{background:#e8faf4}
.tab.active{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(25,181,140,.25)}
.tab-content{display:none;animation:fadeIn .3s ease}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.service-card{background:linear-gradient(180deg,#f9fdfa 0%, #ffffff 100%);border:1px solid var(--line);border-radius:20px;padding:24px 26px;box-shadow:0 10px 30px rgba(10,124,96,.08)}
.service-card h3{font-size:24px;font-weight:900;color:var(--brand-700);margin-bottom:14px}
.features-grid{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr;gap:10px}
.features-grid li{display:flex;gap:10px;align-items:flex-start;color:#29473e}
.features-grid i{color:var(--brand-700)}
@media(min-width:920px){.features-grid{grid-template-columns:1fr 1fr}}

.why-us{margin-top:48px;background:linear-gradient(180deg,#f3fbf8 0%, #ffffff 100%);border:1px solid #d6eee6;border-radius:18px;padding:24px;box-shadow:0 6px 20px rgba(25,181,140,.08)}
.why-us h3{font-size:26px;font-weight:900;color:var(--brand-700);margin-bottom:8px;text-align:center}
.why-grid{list-style:none;margin:0 auto 18px;padding:0;max-width:980px;display:grid;grid-template-columns:1fr;gap:10px}
.why-grid li{display:flex;align-items:flex-start;gap:10px;color:#33524a}
.why-grid i{color:var(--brand)}
@media(min-width:920px){.why-grid{grid-template-columns:1fr 1fr}}

/* GRIDS / CARDS */
.grid{display:grid;gap:18px}
.grid--3{grid-template-columns:1fr}
@media(min-width:780px){.grid--3{grid-template-columns:repeat(3,1fr)}}

.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 1px 3px rgba(15,23,42,.05);transition:.2s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,124,96,.12)}

/* MEDIA CARD – alto fijo + cover, jamás se deforma */
.card__media{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#eef5f1;
  height:260px; /* clave */
  width:100%;
  border:1px solid var(--line);
}
@media (max-width:900px){
  .card__media{height:220px}
}
.card__media img{
  width:100%;
  height:100%;
  object-fit:cover;  /* recorta manteniendo proporción */
  transform:scale(1);
  transition:transform .35s;
}
.card:hover .card__media img{transform:scale(1.03)}

.badges{position:absolute;top:12px;left:12px;display:flex;gap:8px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#ecf8f4;border:1px solid #d6eee6;color:#1b3a33;font-weight:800;font-size:12px}
.badge--primary{background:var(--brand);color:#fff;border-color:transparent}
.badge--sold{background:#f7c948;color:#111827;border-color:transparent}

.card__body{padding:14px}
.card__title{font-size:18px;font-weight:900;margin:0 0 4px}
.card__meta{display:flex;gap:12px;color:#33524a;font-size:14px;flex-wrap:wrap}
.card__price{margin-top:8px;color:#0a7c60;font-weight:900}

/* Botones en UNA línea */
.card .actions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
@media (max-width:560px){ .card .actions{flex-wrap:wrap} }

/* CARRUSEL: 3 visibles desktop, sin scroll vertical */
.carousel{position:relative}
.carousel__track{
  display:flex;gap:16px;
  overflow-x:auto;overflow-y:hidden; /* <- sin scroll vertical */
  scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:thin
}
.carousel__btn{display:none;position:absolute;top:50%;transform:translateY(-50%);height:44px;width:44px;border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer}
.carousel__btn:hover{background:#f1fbf7}
.carousel__btn:first-of-type{left:-16px}
.carousel__btn:last-of-type{right:-16px}
@media(min-width:900px){.carousel__btn{display:grid;place-items:center}}
#active-listings > .card{scroll-snap-align:start;min-width:calc((100% - 32px)/3)}
@media(max-width:899px){#active-listings > .card{min-width:85%}}

/* ABOUT */
.section--about{background:linear-gradient(180deg,#ffffff 0%, #f1faf6 100%)}
.about{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:980px){.about{grid-template-columns:1.05fr .95fr}}
.about__text h2{font-size:32px;margin:0 0 8px;font-weight:900;color:#143a31}
.bullets{list-style:none;padding:0;margin:14px 0 0;color:#274d44}
.bullets li{margin:6px 0}
.about__media img{border-radius:20px;border:1px solid var(--line);box-shadow:0 16px 50px rgba(10,124,96,.12);height:380px;object-fit:cover;width:100%}

/* FOOTER */
.footer{border-top:1px solid var(--line);background:#fff}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;flex-wrap:wrap}
.social{display:inline-flex;gap:8px}
.muted{color:#6c7e77;font-size:14px}

/* FAB */
.fab{position:fixed;bottom:20px;right:20px;background:var(--wa);color:#fff;width:56px;height:56px;border-radius:999px;display:grid;place-items:center;box-shadow:0 12px 30px rgba(22,163,74,.35);transition:.2s;font-size:20px}
.fab:hover{background:#22c55e}

/* Espaciado pedido */
.hero-split { padding-bottom: 10px; }
.purpose-card { margin-bottom: 0; }
.section:first-of-type { padding-top: 0; }

/* === FIX TARJETAS LISTADO === */
.grid.grid--3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  align-items: start;
}

.card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6f0eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: transform .2s ease;
}
.card:hover { transform: translateY(-4px); }

.card__media {
  display: block;
  height: 240px; /* 🔹 fija altura uniforme */
  overflow: hidden;
  border-bottom: 1px solid #eaeaea;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 🔹 evita que se estire o corte mal */
}

.card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.card__title {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  color: #143a31;
}
.card__meta {
  font-size: 14px;
  color: #4b665a;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.card__price {
  font-size: 16px;
  font-weight: 900;
  color: #00966b;
}

.actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.actions .btn {
  flex: 1;
  text-align: center;
}

/* === Fix de títulos se superponiendo === */
.section__title {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

/* === PRECIOS MÚLTIPLES (venta + alquiler) === */
.card__price-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  font-size: 14px; /* 🔹 ligeramente más pequeño */
  font-weight: 800;
  line-height: 1.2;
}

.card__price-stack .price-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card__price-stack .label {
  background: #ecf8f4;
  color: #00966b;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
}

.card__price-stack .value {
  color: #143a31;
  font-weight: 900;
}

/* === Carrusel para el listado activo (misma tarjeta, sin deformar) === */
.carousel{position:relative}
.carousel__track{
  display:flex; gap:16px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding: 4px 2px 10px;
  scrollbar-width:thin;
}
.carousel__track > .card{
  scroll-snap-align:start;
  min-width: 340px;          /* ancho cómodo de tarjeta */
  max-width: 360px;
  flex: 0 0 auto;
}

/* Flechas (solo desktop) */
.carousel__btn{
  display:none; position:absolute; top:50%;
  transform:translateY(-50%);
  height:44px; width:44px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.08); cursor:pointer;
}
.carousel__btn:hover{background:#f1fbf7}
.carousel__btn#btn-prev{left:-16px}
.carousel__btn#btn-next{right:-16px}
@media (min-width: 900px){ .carousel__btn{display:grid;place-items:center} }

/* En móviles se comporta como carrusel táctil (swipe) sin flechas */
@media (max-width: 899px){
  .carousel__track > .card{
    min-width: 85%;
    max-width: 85%;
  }
}
.desc-box{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fbfefd;
  color:#173d33;
  max-height:360px;        /* por si pegas un copy largo */
  overflow:auto;
  line-height:1.35;
  font-weight:700;
  white-space:pre-wrap;     /* respeta saltos de línea del JSON */
}
.desc-box a{ color:#0A7C60; text-decoration:underline; word-break:break-word }
@media (max-width: 980px){
  .gallery-main{ height:380px }  /* pequeño ajuste responsive */
}
@media (max-width: 640px){
  .gallery-main{ height:300px }
}