/* ============================================================
   home.css
   ============================================================ */

/* ══ HERO ══ */
.hero {
  position: relative;
  height: 85vh; min-height: 544px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
}
.hero__video-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(7,18,32,0.45) 0%,
    rgba(7,18,32,0.35) 40%,
    rgba(7,18,32,0.62) 70%,
    rgba(7,18,32,0.90) 100%);
}
.hero__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--nav-h) + 28px) 20px 56px;
  width: 100%;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(37,99,235,0.18); border: 1px solid rgba(37,99,235,0.38);
  color: #bfdbfe; font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 16px; border-radius: var(--r-full); margin-bottom: 24px;
}
.hero__badge::before {
  content:''; width:5px; height:5px; background:#60a5fa;
  border-radius:50%; animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.7)} }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 80px); font-weight: 700;
  color: white; line-height: 1.05; margin-bottom: 18px;
  text-shadow: 0 2px 32px rgba(0,0,0,0.45); max-width: 840px;
}
.hero__title em { font-style:normal; color:#60a5fa; }
.hero__subtitle {
  font-size: clamp(14px, 1.8vw, 18px); color: rgba(255,255,255,0.65);
  font-weight: 300; max-width: 460px; margin-bottom: 48px; line-height: 1.7;
}
/* hero search */
.hero__search {
  background: rgba(255,255,255,0.97); border-radius: var(--r-xl);
  padding: 24px 28px; width: 100%; max-width: 760px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.42);
}
.hero__search-grid {
  display: grid; grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: 14px; align-items: end;
}
.hero__search-group label {
  display: block; font-size: 10px; font-weight: 700;
  color: var(--gray-400); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 7px;
}
.hero__search-group select,
.hero__search-group input {
  width: 100%; padding: 11px 13px;
  border: 1.5px solid var(--gray-200); border-radius: var(--r-md);
  font-size: 14px; color: var(--gray-800); background: white; outline: none;
  transition: border-color 0.2s; font-family: var(--font-body);
}
.hero__search-group select:focus,
.hero__search-group input:focus { border-color: var(--accent); }
.hero__search-btn {
  padding: 12px 24px; background: var(--accent); color: white;
  border: none; border-radius: var(--r-md);
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: all 0.2s;
  white-space: nowrap;
}
.hero__search-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }


/* ══ SECTION HEADER ══ */
.section-header { margin-bottom: 36px; }


/* ══ FILTER BAR ══ */
.filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 32px;
}
.filter-bar__types { display: flex; gap: 6px; }
.filter-bar__btn {
  padding: 9px 20px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent; color: rgba(255,255,255,0.5);
  transition: all 0.2s; letter-spacing: 0.3px;
}
.filter-bar__btn:hover { color: white; border-color: rgba(255,255,255,0.35); }
.filter-bar__btn--active {
  background: white; color: var(--navy);
  border-color: white; box-shadow: 0 2px 14px rgba(0,0,0,0.2);
}
.filter-bar__inputs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-bar__select {
  padding: 9px 13px; border-radius: var(--r-md); font-size: 13px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.75); outline: none; font-family: var(--font-body);
  transition: border-color 0.2s; cursor: pointer;
}
.filter-bar__select option { background: #0c1c35; color: white; }
.filter-bar__select:focus { border-color: rgba(255,255,255,0.35); }
.filter-bar__search-wrap { position: relative; display: flex; align-items: center; }
.filter-bar__search-icon { position: absolute; left: 11px; color: rgba(255,255,255,0.35); pointer-events: none; }
.filter-bar__input {
  padding: 9px 13px 9px 34px; border-radius: var(--r-md); font-size: 13px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.07);
  color: white; outline: none; font-family: var(--font-body);
  transition: border-color 0.2s; width: 210px;
}
.filter-bar__input::placeholder { color: rgba(255,255,255,0.3); }
.filter-bar__input:focus { border-color: rgba(255,255,255,0.35); }
.filter-bar__count { font-size: 12px; color: rgba(255,255,255,0.3); white-space: nowrap; }


/* ══ PROPERTY LIST — horizontal rows ══ */
.props-grid {
  display: flex; flex-direction: column;
  gap: 12px;
  border: none;
}
.props-empty { text-align:center; padding:60px 0; color:rgba(255,255,255,0.25); font-size:15px; }

.prop-card {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  background: rgba(255,255,255,0.03);
  border-bottom: none; border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: background 0.2s;
  transform: 0.2s;
  height: 160px;
}
.prop-card:last-child { border-bottom: none; }
.prop-card:hover { background: rgba(255,255,255,0.07); }

.prop-card__img-wrap { position: relative; overflow: hidden; height: 160px; }
.prop-card__img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.prop-card:hover .prop-card__img { transform: scale(1.05); }
.prop-card__badge {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 10px; border-radius: var(--r-sm);
  font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.prop-card__badge--venta    { background: rgba(7,18,32,0.88); color: white; }
.prop-card__badge--alquiler { background: rgba(37,99,235,0.92); color: white; }

.prop-card__body {
  padding: 24px 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
}
.prop-card__zone { font-size: 12px; font-weight: 700; color: #60a5fa; text-transform: uppercase; letter-spacing: 1.5px; }
.prop-card__title { font-size: 17px; font-weight: 600; color: white; line-height: 1.3; }
.prop-card__price { font-size: 10px; color: rgba(255,255,255,0.42); margin-top: 2px; }
.prop-card__price strong { font-size: 18px; font-weight: 700; color: white; margin-right: 4px; }

.prop-card__actions {
  display: flex; flex-direction: column; justify-content: center;
  align-items: stretch; gap: 10px;
  padding: 24px 28px;
  border-left: 1px solid rgba(255,255,255,0.06);
  min-width: 180px;
}
.prop-card__cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.prop-card__cta--primary { background: var(--accent); color: white; }
.prop-card__cta--primary:hover { background: var(--accent-hover); }
.prop-card__cta--wa {
  background: transparent; color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.12);
}
.prop-card__cta--wa:hover { background: #25D366;; color: white; border-color: transparent; }


/* ══ ABOUT (section--white) ══ */
.about__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: center; }
.about__video-wrap {
  position: relative; background: var(--navy);
  border: none;
  overflow: visible;
  
}
.about__video { width:105%; height:320px; object-fit:cover; display:block; mix-blend-mode:screen; }
.about__stat-card {
  position: absolute; bottom: -14px; right: -14px;
  background: var(--accent); color: white;
  border-radius: var(--r-lg); padding: 14px 20px; box-shadow: var(--shadow-lg);
}
.about__stat-card .num { font-family:var(--font-display); font-size:28px; font-weight:700; line-height:1; }
.about__stat-card .lbl { font-size:11px; opacity:0.8; margin-top:4px; }
.about__features { display:flex; flex-direction:column; gap:12px; margin:16px 0 22px; }
.about__feat { display:flex; align-items:flex-start; gap:12px; }
.about__feat-icon { width:34px; height:34px; background:rgba(37,99,235,0.1); border-radius:var(--r-md); display:grid; place-items:center; font-size:15px; flex-shrink:0; }
.about__feat-title { color:var(--navy); font-size:14px; font-weight:600; margin-bottom:2px; }
.about__feat-desc  { color:var(--gray-500); font-size:13px; line-height:1.55; }


/* ══ CONTACT (section--dark) ══ */
.contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact__items { display:flex; flex-direction:column; gap:8px; }

.contact__item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-lg);
  transition: background 0.2s, border-color 0.2s;
}
.contact__item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}
.contact__item-label {
  font-size: 10px; color: rgba(255,255,255,0.35);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 3px;
}
.contact__item-value {
  font-size: 14px; font-weight: 500; color: white;
}
.contact__item-value a {
  color: white; text-decoration: none;
  transition: color 0.2s;
}
.contact__item-value a:hover { color: #93c5fd; }

/* Instagram y Facebook con color de acento al hover */
.contact__item--ig:hover { border-color: rgba(142, 45, 78, 0.842); background: rgba(191, 62, 105, 0.801); }
.contact__item--fb:hover { border-color: rgba(24,119,242,0.4); background: rgba(24, 118, 242, 0.709); }

.wa-cta { display:flex; align-items:center; gap:12px; border: 1px solid rgba(255,255,255,0.07) ;background:rgba(255,255,255,0.04); color:white; border-radius:var(--r-lg); padding:15px 18px; margin-top:12px; transition:all 0.2s; }
.wa-cta:hover { background:var(--green-dk); transform:translateY(-2px); }
.wa-cta__icon{font-size:22px;} .wa-cta__title{font-size:14px;font-weight:700;} .wa-cta__sub{font-size:12px;opacity:0.85;} .wa-cta__arrow{margin-left:auto;font-size:18px;}

.contact__form-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:var(--r-xl); padding:28px; }
.contact__form-title { font-family:var(--font-display); font-size:20px; color:white; margin-bottom:20px; }
.contact__form-card .form-label { color:rgba(255,255,255,0.45); }
.contact__form-card .form-control { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.12); color:white; }
.contact__form-card .form-control::placeholder { color:rgba(255,255,255,0.28); }
.contact__form-card .form-control:focus { border-color:var(--accent); background:rgba(255,255,255,0.1); }

/* ══ RESPONSIVE ══ 
@media (max-width: 900px) {
  .prop-card {
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .prop-card__img-wrap {
    height: 100%;
    min-height: 120px;
  }
  .prop-card__actions {
    display: none;
  }
}
*/
@media (max-width: 900px) {
  .prop-card {
    grid-template-columns: 120px 1fr;
    height: auto;
  }
  .prop-card__img-wrap {
    min-height: 110px;
  }
  .prop-card__actions {
    display: flex; justify-content: flex-start;
    grid-column: 1 / -1; grid-row: 3;
    padding: 16px 16px 14px;
    border-left: none;
    gap: 8px;
    min-width: unset;
  }
  .hero__search-grid {
    grid-template-columns: 1fr;
  }
  .about__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .contact__grid {
    grid-template-columns: 1fr;
  }
  .about__feat { 
    flex-direction: column; align-items: center; text-align: center; 
  }
  .about__feat-icon { 
    margin-bottom: 8px; 
  }
  .section__desc { 
    max-width: 100%; 
    text-align: center;
  }
  .hero { 
    height: auto; 
    padding: 20px 10px 20px; 
  }
  .hero__badge { 
    margin-bottom: 16px; 
  }
  .hero__title { 
    font-size: clamp(28px, 8vw, 48px); 
  }
  .hero__subtitle { 
    font-size: clamp(12px, 3vw, 16px); 
    max-width: 100%; 
    margin-bottom: 32px; 
  }
}