/* ═══════════════════════════════════════════════
   HabitaPy — Frontend CSS
   ═══════════════════════════════════════════════ */
:root {
  --navy:  #0D1B4B;
  --navy2: #1E2D6B;
  --red:   #D91F1F;
  --red2:  #FF3333;
  --white: #FFFFFF;
  --bg:    #F7F8FA;
  --border:#E3E7F0;
  --text:  #1A1F36;
  --soft:  #6B7280;
  --lighter:#9CA3AF;
  --green: #16A34A;
  --shadow: 0 4px 24px rgba(13,27,75,0.10);
  --shadow-lg: 0 8px 48px rgba(13,27,75,0.16);
  --radius: 14px;
  --radius-sm: 8px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:'Inter',sans-serif; color:var(--text); background:var(--white); overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* ── TIPOGRAFÍA ── */
h1,h2,h3,h4,h5 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; line-height:1.2; }

/* ── NAVBAR ── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:all 0.3s ease;
  padding:0 24px;
}
.navbar.solid {
  background:var(--navy);
  box-shadow:0 2px 20px rgba(0,0,0,0.15);
}
.navbar.transparent { background:transparent; }
.navbar-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:70px;
}
.navbar-logo img { height:36px; }
.navbar-links { display:flex; align-items:center; gap:32px; }
.navbar-links a {
  font-size:14px; font-weight:600; color:rgba(255,255,255,0.85);
  transition:color 0.2s;
}
.navbar-links a:hover { color:white; }
.navbar-cta {
  background:var(--red); color:white !important;
  padding:9px 22px; border-radius:30px;
  font-size:13.5px !important; font-weight:700 !important;
  transition:background 0.2s, transform 0.1s !important;
}
.navbar-cta:hover { background:#C41717 !important; transform:translateY(-1px); }
.navbar-toggle { display:none; background:none; border:none; cursor:pointer; }
.navbar-toggle span { display:block; width:24px; height:2px; background:white; margin:5px 0; border-radius:2px; transition:all 0.3s; }

/* ── HERO ── */
.hero {
  min-height:100vh;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy2) 50%, #0A1235 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  padding:120px 24px 80px;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-shapes { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-shape {
  position:absolute; border-radius:50%;
  background:linear-gradient(135deg, rgba(217,31,31,0.15), rgba(217,31,31,0.05));
  animation:float 8s ease-in-out infinite;
}
.hero-shape:nth-child(1) { width:500px; height:500px; top:-100px; right:-150px; animation-delay:0s; }
.hero-shape:nth-child(2) { width:300px; height:300px; bottom:-50px; left:-100px; animation-delay:3s; }
.hero-shape:nth-child(3) { width:200px; height:200px; top:30%; right:20%; animation-delay:5s; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(5deg)} }

.hero-content { position:relative; z-index:2; max-width:800px; margin:0 auto; text-align:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  color:white; padding:6px 16px; border-radius:30px;
  font-size:13px; font-weight:600; margin-bottom:24px;
  backdrop-filter:blur(10px);
}
.hero-badge span { color:var(--red2); }
.hero h1 {
  font-size:clamp(36px,5vw,64px); color:white; font-weight:800;
  margin-bottom:20px; line-height:1.1;
}
.hero h1 em { color:var(--red2); font-style:normal; }
.hero-sub { font-size:18px; color:rgba(255,255,255,0.75); margin-bottom:40px; max-width:560px; margin-left:auto; margin-right:auto; }

/* BUSCADOR HERO */
.hero-search {
  background:white; border-radius:20px;
  padding:8px 8px 8px 20px;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
  max-width:700px; margin:0 auto 16px;
}
.hero-search input {
  flex:1; border:none; outline:none; font-size:16px;
  font-family:'Inter',sans-serif; color:var(--text);
  background:transparent;
}
.hero-search input::placeholder { color:var(--lighter); }
.hero-search-btn {
  background:var(--red); color:white; border:none;
  padding:12px 28px; border-radius:14px; font-size:15px; font-weight:700;
  cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif;
  transition:background 0.2s; white-space:nowrap; display:flex; align-items:center; gap:8px;
}
.hero-search-btn:hover { background:#C41717; }
.hero-search-filters {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.hero-filter-btn {
  background:rgba(255,255,255,0.12); color:white; border:1px solid rgba(255,255,255,0.2);
  padding:7px 16px; border-radius:30px; font-size:13px; font-weight:600;
  cursor:pointer; transition:all 0.2s; font-family:'Inter',sans-serif;
}
.hero-filter-btn:hover,.hero-filter-btn.active { background:var(--red); border-color:var(--red); }

/* STATS HERO */
.hero-stats {
  display:flex; gap:40px; justify-content:center; margin-top:48px;
  flex-wrap:wrap;
}
.hero-stat { text-align:center; }
.hero-stat-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:32px; font-weight:800; color:white; }
.hero-stat-num span { color:var(--red2); }
.hero-stat-label { font-size:13px; color:rgba(255,255,255,0.6); margin-top:2px; }

/* ── SECCIÓN BÚSQUEDA INTENSIFICADA ── */
.bi-section {
  background:linear-gradient(135deg, var(--red) 0%, #C41717 100%);
  padding:80px 24px; overflow:hidden; position:relative;
}
.bi-section::before {
  content:'🔍'; position:absolute; right:-20px; top:50%;
  transform:translateY(-50%); font-size:200px; opacity:0.08; line-height:1;
}
.bi-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.bi-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.3);
  color:white; padding:6px 14px; border-radius:30px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
  margin-bottom:16px;
}
.bi-section h2 { font-size:36px; color:white; font-weight:800; margin-bottom:16px; }
.bi-section p { font-size:17px; color:rgba(255,255,255,0.85); margin-bottom:32px; line-height:1.7; }
.bi-features { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.bi-feature {
  display:flex; align-items:center; gap:12px;
  color:white; font-size:15px; font-weight:500;
}
.bi-feature-icon {
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.bi-form {
  background:white; border-radius:20px; padding:32px;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
}
.bi-form h3 { font-size:20px; color:var(--navy); margin-bottom:6px; }
.bi-form p { font-size:13.5px; color:var(--soft); margin-bottom:24px; }

/* ── CONTAINER ── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:80px 0; }
.section-header { margin-bottom:48px; }
.section-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(217,31,31,0.08); color:var(--red);
  padding:5px 14px; border-radius:30px; font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px;
}
.section-title { font-size:clamp(26px,3vw,40px); color:var(--navy); margin-bottom:12px; }
.section-sub { font-size:16px; color:var(--soft); max-width:500px; }

/* ── PROP CARDS ── */
.props-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.prop-card {
  background:white; border-radius:var(--radius); overflow:hidden;
  border:1.5px solid var(--border); box-shadow:var(--shadow);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  display:flex; flex-direction:column;
}
.prop-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.prop-thumb {
  position:relative; height:200px; overflow:hidden;
  background:linear-gradient(135deg,#E8ECF4,#C9D3E8);
}
.prop-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.prop-card:hover .prop-thumb img { transform:scale(1.05); }
.prop-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:48px; }
.prop-op-badge {
  position:absolute; top:12px; left:12px;
  background:var(--navy); color:white; font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:20px; text-transform:uppercase;
}
.prop-op-badge.alquiler { background:var(--red); }
.prop-estado-badge {
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,0.95); font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:20px; color:var(--green);
  display:flex; align-items:center; gap:5px;
}
.prop-estado-dot { width:6px; height:6px; border-radius:50%; background:var(--green); }
.prop-body { padding:18px; flex:1; display:flex; flex-direction:column; }
.prop-precio { font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.prop-precio sup { font-size:14px; font-weight:600; color:var(--soft); }
.prop-titulo { font-size:15px; font-weight:600; color:var(--text); margin-bottom:6px; line-height:1.4; }
.prop-address { font-size:13px; color:var(--soft); margin-bottom:14px; display:flex; align-items:center; gap:5px; }
.prop-specs { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.prop-spec { display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--soft); }
.prop-footer { margin-top:auto; padding-top:14px; border-top:1px solid var(--border); display:flex; gap:8px; }
.btn-ver {
  flex:1; background:var(--navy); color:white; border:none;
  padding:10px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:700;
  cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif;
  transition:background 0.2s; display:flex; align-items:center; justify-content:center; gap:6px;
  text-decoration:none;
}
.btn-ver:hover { background:var(--navy2); }
.btn-wa {
  background:#25D366; color:white; border:none;
  padding:10px 14px; border-radius:var(--radius-sm); font-size:14px;
  cursor:pointer; transition:opacity 0.2s; text-decoration:none;
  display:flex; align-items:center;
}
.btn-wa:hover { opacity:0.85; }

/* ── TIPO CARDS ── */
.tipos-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.tipo-card {
  background:white; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:20px 12px; text-align:center; cursor:pointer;
  transition:all 0.2s; text-decoration:none; color:inherit;
}
.tipo-card:hover,.tipo-card.active { background:var(--navy); border-color:var(--navy); }
.tipo-card:hover .tipo-icon,.tipo-card.active .tipo-icon { background:rgba(255,255,255,0.15); }
.tipo-card:hover .tipo-label,.tipo-card.active .tipo-label { color:white; }
.tipo-card:hover .tipo-count,.tipo-card.active .tipo-count { color:rgba(255,255,255,0.7); }
.tipo-icon { width:48px; height:48px; border-radius:12px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 10px; transition:background 0.2s; }
.tipo-label { font-size:13px; font-weight:700; color:var(--navy); transition:color 0.2s; }
.tipo-count { font-size:11.5px; color:var(--soft); margin-top:2px; transition:color 0.2s; }

/* ── FORMS ── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:12px; font-weight:700; color:var(--soft); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px; }
.form-control {
  width:100%; padding:12px 16px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-size:14px; font-family:'Inter',sans-serif;
  color:var(--text); background:#FAFBFD; outline:none;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(13,27,75,0.07); background:white; }
textarea.form-control { resize:vertical; min-height:80px; }
.btn-primary {
  width:100%; padding:14px; background:var(--red); color:white; border:none;
  border-radius:var(--radius-sm); font-size:15px; font-weight:700;
  cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif;
  transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary:hover { background:#C41717; transform:translateY(-1px); }
.btn-secondary {
  width:100%; padding:14px; background:var(--navy); color:white; border:none;
  border-radius:var(--radius-sm); font-size:15px; font-weight:700;
  cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif;
  transition:all 0.2s;
}
.btn-secondary:hover { background:var(--navy2); }
/* HONEYPOT */
.hp-field { display:none !important; }

/* ── CIUDADES ── */
.ciudades-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; overflow:hidden; }
.ciudad-card {
  border-radius:var(--radius); overflow:hidden; position:relative;
  height:160px; cursor:pointer; text-decoration:none;
  transition:transform 0.25s;
}
.ciudad-card:hover { transform:scale(1.02); }
.ciudad-bg {
  width:100%; height:100%;
  background:linear-gradient(135deg, var(--navy), var(--navy2));
  display:flex; align-items:flex-end; padding:16px;
}
.ciudad-name { font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:800; color:white; }
.ciudad-count { font-size:12px; color:rgba(255,255,255,0.7); margin-top:2px; }
.ciudad-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(13,27,75,0.85), transparent); }

/* ── WHY US ── */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.why-card { text-align:center; padding:32px 20px; }
.why-icon { width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg,var(--navy),var(--navy2)); display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 20px; box-shadow:0 8px 24px rgba(13,27,75,0.2); }
.why-title { font-size:17px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.why-text { font-size:14px; color:var(--soft); line-height:1.6; }

/* ── FOOTER ── */
.footer { background:var(--navy); color:white; padding:60px 0 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand img { height:40px; margin-bottom:16px; }
.footer-tagline { font-size:14px; color:rgba(255,255,255,0.6); line-height:1.7; margin-bottom:20px; }
.footer-social { display:flex; gap:12px; }
.footer-social a { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:16px; transition:background 0.2s; }
.footer-social a:hover { background:var(--red); }
.footer-col-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; color:white; margin-bottom:16px; text-transform:uppercase; letter-spacing:0.5px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:14px; color:rgba(255,255,255,0.6); transition:color 0.2s; }
.footer-links a:hover { color:white; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-copy { font-size:13px; color:rgba(255,255,255,0.4); }

/* ── MOBILE MENU ── */
.mobile-menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:499;}
.mobile-menu-overlay.open{display:block;}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(280px,82vw);background:linear-gradient(160deg,#0a1852,#0D1F6B 60%,#122a8a);z-index:500;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.28s ease;box-shadow:-8px 0 32px rgba(0,0,0,.25);}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,.1);min-height:52px;}
.mobile-menu-logo{height:24px;}
.mobile-menu-close{background:rgba(255,255,255,.12);border:none;color:white;width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;}
.mobile-menu-links{flex:1;overflow-y:auto;padding:4px 0;}
.mobile-menu-links a,.mobile-menu a{font-family:Inter,sans-serif;font-size:13px;font-weight:600;color:rgba(255,255,255,.82);padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:9px;text-decoration:none;}
.mobile-menu-links a:hover,.mobile-menu a:hover{color:#fff;background:rgba(255,255,255,.07);}
.mobile-menu-ctas{padding:12px 14px;display:flex;flex-direction:column;gap:7px;border-top:1px solid rgba(255,255,255,.1);}
.mm-cta{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:8px;font-size:12px;font-weight:700;font-family:Inter,sans-serif;text-decoration:none;border:none;}
.mm-cta-green{background:#1a7f4b;color:#fff;}
.mm-cta-red{background:#D91F1F;color:#fff;}

/* ── FILTROS PÁGINA LISTADO ── */
.filtros-bar {
  background:white; border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); margin-bottom:24px;
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
}
.filtros-bar .form-group { margin-bottom:0; flex:1; min-width:140px; }

/* ── SCROLL ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── CHIPS ── */
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:12.5px; font-weight:600; background:var(--bg); color:var(--soft); border:1.5px solid var(--border); }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(100px);
  background:var(--navy); color:white; padding:14px 24px; border-radius:14px;
  font-size:14px; font-weight:600; z-index:999; transition:transform 0.3s ease;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px;
}
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.success { background:var(--green); }
.toast.error { background:var(--red); }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .props-grid { grid-template-columns:repeat(2,1fr); }
  .tipos-grid { grid-template-columns:repeat(3,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .bi-inner { grid-template-columns:1fr; gap:40px; }
}
@media (max-width:768px) {
  .navbar-links { display:none; }
  .navbar-toggle { display:block; }
  .hero { padding:100px 20px 60px; }
  .hero-stats { gap:24px; }
  .hero-stat-num { font-size:24px; }
  .props-grid { grid-template-columns:1fr; }
  .tipos-grid { grid-template-columns:repeat(3,1fr); }
  .ciudades-grid { grid-template-columns:1fr; }
  .ciudad-card { min-height:120px; }
  .why-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .section { padding:60px 0; }
  .bi-section { padding:60px 24px; }
  .bi-section h2 { font-size:28px; }
  .hero-search { flex-direction:column; padding:16px; border-radius:16px; }
  .hero-search input { width:100%; padding:4px 0; }
  .hero-search-btn { width:100%; justify-content:center; }
}
@media (max-width:480px) {
  .tipos-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── FIXES GLOBALES MOBILE ── */
*, *::before, *::after { box-sizing:border-box; }

/* Footer mobile */
@media(max-width:768px){
  .footer { padding:40px 20px 24px; }
  .footer-bottom { flex-direction:column; text-align:center; align-items:center; }
  .footer-bottom > div { justify-content:center !important; text-align:center; }
  .footer-copy { text-align:center; }
}

/* Banner búsqueda intensificada mobile */
@media(max-width:700px){
  section.bi-cta-banner, [class*="bi-cta"] { 
    grid-template-columns:1fr !important; 
    padding:40px 20px !important;
  }
  section.bi-cta-banner > div:last-child { text-align:left !important; }
}