@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  --background: #ffffff;
  --foreground: #1e2a3a;
  --card: #ffffff;
  --card-foreground: #1e2a3a;
  --primary: #1e3a5f;
  --primary-foreground: #ffffff;
  --secondary: #f4f6f8;
  --secondary-foreground: #1e3a5f;
  --muted: #f4f6f8;
  --muted-foreground: #6b7a8d;
  --accent: #a0894d;
  --accent-foreground: #1e2a3a;
  --border: #e2e6ec;
  --radius: 0.5rem;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
  --shadow-card: 0 4px 20px -4px rgba(30,42,58,0.08);
  --shadow-card-hover: 0 8px 30px -4px rgba(30,42,58,0.15);
  --shadow-hero: 0 25px 50px -12px rgba(30,42,58,0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; border-color: var(--border); }
body { font-family: var(--font-body); color: var(--foreground); background: var(--background); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media(min-width:640px){ .container{ padding:0 1.5rem; } }
@media(min-width:1024px){ .container{ padding:0 2rem; } }

/* Top Bar */
.top-bar { background: var(--primary); color: var(--primary-foreground); font-size: 0.875rem; }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.top-bar a { color: var(--primary-foreground); display: flex; align-items: center; gap: 0.5rem; transition: color 0.2s; }
.top-bar a:hover { color: var(--accent); }
.top-bar .left { display: flex; gap: 1.5rem; }

/* Header */
header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.header-main { padding: 1rem 0; }
.header-main .container { display: flex; align-items: center; justify-content: space-between; }
.logo-text { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--primary); }
.logo-sub { font-size: 0.65rem; color: var(--muted-foreground); letter-spacing: 0.15em; display: block; }
nav ul { display: flex; gap: 2rem; list-style: none; }
nav a { font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); transition: color 0.2s; }
nav a:hover, nav a.active { color: var(--primary); }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s; text-decoration: none; }
.btn-accent { background: var(--accent); color: var(--accent-foreground); }
.btn-accent:hover { opacity: 0.9; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--secondary); }
.btn-lg { padding: 0.875rem 2rem; font-size: 1.125rem; height: 3.5rem; }
.btn-white-outline { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: var(--primary-foreground); }
.btn-white-outline:hover { background: rgba(255,255,255,0.1); }

/* Mobile menu */
.menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--foreground); }
.mobile-nav { display: none; flex-direction: column; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.mobile-nav.open { display: flex; }
@media(max-width:1023px){
  nav.desktop { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: block; }
  .top-bar { display: none; }
}

/* Hero */
.hero { position: relative; min-height: 85vh; display: flex; align-items: center; background-size: cover; background-position: center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(30,58,95,0.9), rgba(30,58,95,0.7), rgba(30,58,95,0.5)); }
.hero .container { position: relative; z-index: 1; padding-top: 5rem; padding-bottom: 5rem; }
.hero h1 { font-size: 2.5rem; font-weight: 700; color: var(--primary-foreground); line-height: 1.2; }
.hero h1 span { display: block; color: var(--accent); }
.hero p { margin-top: 1.5rem; font-size: 1.125rem; color: rgba(255,255,255,0.9); max-width: 36rem; }
.stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 4rem; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 0.875rem; color: rgba(255,255,255,0.8); margin-top: 0.25rem; }
@media(min-width:768px){ .hero h1 { font-size: 3.5rem; } .stats { gap: 4rem; } }

/* Search Box */
.search-box { margin-top: 2.5rem; max-width: 56rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); padding: 1.5rem 2rem; border-radius: 1rem; box-shadow: var(--shadow-hero); }
.search-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media(min-width:768px){ .search-grid { grid-template-columns: repeat(4,1fr); } }
.search-box select, .search-box input { height: 3rem; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.875rem; background: var(--background); color: var(--foreground); width: 100%; }
.search-box select:focus, .search-box input:focus { outline: 2px solid var(--primary); }

/* Sections */
.section { padding: 4rem 0; }
@media(min-width:768px){ .section { padding: 6rem 0; } }
.section-header { text-align: center; max-width: 42rem; margin: 0 auto 4rem; }
.section-label { color: var(--accent); font-weight: 500; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; }
.section-title { font-size: 1.875rem; font-weight: 700; color: var(--foreground); margin-top: 0.5rem; }
@media(min-width:768px){ .section-title { font-size: 2.25rem; } }
.section-desc { color: var(--muted-foreground); margin-top: 1rem; }
.bg-secondary { background: var(--secondary); }

/* Property Card */
.properties-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media(min-width:768px){ .properties-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px){ .properties-grid { grid-template-columns: repeat(4,1fr); } }
.property-card { background: var(--card); border-radius: 0.75rem; overflow: hidden; box-shadow: var(--shadow-card); transition: all 0.3s; }
.property-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.property-card-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.property-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.property-card:hover .property-card-img img { transform: scale(1.1); }
.property-card-badges { position: absolute; top: 1rem; left: 1rem; display: flex; gap: 0.5rem; }
.badge { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-primary { background: var(--primary); color: var(--primary-foreground); }
.badge-accent { background: var(--accent); color: var(--accent-foreground); }
.badge-gold { background: var(--accent); color: var(--foreground); }
.property-card-price { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(30,42,58,0.8), transparent); padding: 1rem; }
.property-card-price p { font-size: 1.5rem; font-weight: 700; color: var(--background); }
.property-card-price span { font-size: 0.875rem; font-weight: 400; }
.property-card-body { padding: 1.25rem; }
.property-card-category { font-size: 0.75rem; font-weight: 500; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
.property-card-title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--foreground); margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.property-card-address { display: flex; align-items: center; gap: 0.25rem; color: var(--muted-foreground); font-size: 0.875rem; margin-top: 0.5rem; }
.property-card-features { display: flex; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.feature-item { display: flex; align-items: center; gap: 0.375rem; color: var(--muted-foreground); font-size: 0.875rem; }

/* Features / Why Choose Us */
.features-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media(min-width:768px){ .features-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px){ .features-grid { grid-template-columns: repeat(4,1fr); } }
.feature-card { text-align: center; padding: 1.5rem; border-radius: 0.75rem; background: var(--card); border: 1px solid var(--border); transition: border-color 0.2s; }
.feature-card:hover { border-color: var(--accent); }
.feature-icon { width: 4rem; height: 4rem; margin: 0 auto 1.5rem; background: rgba(160,137,77,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accent); }
.feature-card h3 { font-size: 1.25rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.75rem; }
.feature-card p { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.7; }

/* CTA */
.cta { position: relative; padding: 5rem 0; overflow: hidden; background: linear-gradient(135deg, var(--primary), #162d4a); color: var(--primary-foreground); text-align: center; }
.cta h2 { font-size: 1.875rem; font-weight: 700; }
@media(min-width:768px){ .cta h2 { font-size: 2.5rem; } }
.cta p { margin-top: 1.5rem; font-size: 1.125rem; opacity: 0.8; }
.cta-buttons { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; }
@media(min-width:640px){ .cta-buttons { flex-direction: row; } }

/* Footer */
footer { background: var(--primary); color: var(--primary-foreground); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media(min-width:768px){ .footer-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px){ .footer-grid { grid-template-columns: repeat(4,1fr); } }
footer h4 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; margin-bottom: 1.5rem; }
footer ul { list-style: none; }
footer ul li { margin-bottom: 0.75rem; }
footer a { color: rgba(255,255,255,0.8); font-size: 0.875rem; transition: color 0.2s; }
footer a:hover { color: var(--accent); }
.footer-socials { display: flex; gap: 1rem; margin-top: 0.75rem; }
.footer-socials a { width: 2.5rem; height: 2.5rem; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; font-size: 1.125rem; }
.footer-socials a:hover { background: var(--accent); }
.footer-bottom { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.2); display: flex; flex-direction: column; gap: 1rem; align-items: center; font-size: 0.875rem; color: rgba(255,255,255,0.6); }
@media(min-width:768px){ .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-bottom a { color: var(--accent); }
.footer-contact-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; color: rgba(255,255,255,0.8); }
.footer-contact-icon { color: var(--accent); font-size: 1.125rem; flex-shrink: 0; margin-top: 2px; }
.footer-desc { color: rgba(255,255,255,0.8); font-size: 0.875rem; line-height: 1.7; }

/* Page Header */
.page-header { background: var(--primary); padding: 4rem 0; text-align: center; }
.page-header h1 { font-size: 2rem; font-weight: 700; color: var(--primary-foreground); }
@media(min-width:768px){ .page-header h1 { font-size: 2.75rem; } }
.page-header p { color: rgba(255,255,255,0.8); margin-top: 0.75rem; font-size: 1.125rem; }

/* About Page */
.about-grid { display: grid; gap: 3rem; align-items: center; }
@media(min-width:1024px){ .about-grid { grid-template-columns: 1fr 1fr; } }
.about-img { position: relative; }
.about-img img { border-radius: 1rem; box-shadow: var(--shadow-hero); }
.about-badge { position: absolute; bottom: -1.5rem; left: -1.5rem; background: var(--accent); color: var(--accent-foreground); padding: 1.5rem; border-radius: 0.75rem; }
.about-badge .big { font-size: 2.25rem; font-weight: 700; }

/* Values grid */
.values-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media(min-width:768px){ .values-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px){ .values-grid { grid-template-columns: repeat(4,1fr); } }
.value-card { background: var(--card); padding: 2rem; border-radius: 0.75rem; border: 1px solid var(--border); }
.value-card-icon { font-size: 2.5rem; color: var(--accent); margin-bottom: 1rem; }
.value-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
.value-card p { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.7; }

/* Contact Page */
.contact-grid { display: grid; gap: 3rem; }
@media(min-width:1024px){ .contact-grid { grid-template-columns: 1fr 2fr; } }
.contact-info-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.contact-info-icon { width: 3rem; height: 3rem; background: rgba(160,137,77,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); font-size: 1.125rem; }
.contact-info-item p.label { font-weight: 500; color: var(--foreground); }
.contact-info-item p.value, .contact-info-item a { color: var(--muted-foreground); font-size: 0.875rem; margin-top: 0.25rem; }
.contact-form { background: var(--card); padding: 2rem; border-radius: 1rem; border: 1px solid var(--border); }
.contact-form h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media(min-width:640px){ .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--foreground); }
.form-group input, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.875rem; background: var(--background); color: var(--foreground); }
.form-group input { height: 3rem; }
.form-group textarea { resize: vertical; min-height: 8rem; }
.form-group input:focus, .form-group textarea:focus { outline: 2px solid var(--primary); }

/* Map section */
.map-section { height: 24rem; background: var(--secondary); position: relative; }
.map-section .bg-img { position: absolute; inset: 0; background-size: 85%; background-position: center; background-repeat: no-repeat; }
.map-section .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.map-section .content { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: white; }
.map-section .content p { font-size: 0.875rem; }

/* Property List */
.results-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; }
@media(min-width:768px){ .results-header { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.search-page-box { background: var(--card); padding: 1.5rem; border-radius: 0.75rem; border: 1px solid var(--border); margin-bottom: 2.5rem; }
.result-count { color: var(--muted-foreground); margin-bottom: 1.5rem; }

/* Property Detail */
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; transition: color 0.2s; }
.back-link:hover { color: var(--primary); }
.detail-grid { display: grid; gap: 2.5rem; }
@media(min-width:1024px){ .detail-grid { grid-template-columns: 2fr 1fr; } }
.detail-image { border-radius: 1rem; overflow: hidden; aspect-ratio: 16/9; position: relative; }
.detail-image img { width: 100%; height: 100%; object-fit: cover; }
.detail-features { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; padding: 1.5rem; background: var(--secondary); border-radius: 0.75rem; }
@media(min-width:640px){ .detail-features { grid-template-columns: repeat(4,1fr); } }
.detail-feature { text-align: center; }
.detail-feature .icon { font-size: 1.25rem; color: var(--accent); }
.detail-feature .val { font-weight: 600; margin-top: 0.5rem; }
.detail-feature .lab { font-size: 0.875rem; color: var(--muted-foreground); }
.detail-sidebar { position: sticky; top: 6rem; background: var(--card); border-radius: 1rem; border: 1px solid var(--border); padding: 1.5rem; }
.detail-sidebar .price { font-size: 1.875rem; font-weight: 700; color: var(--primary); }
.detail-sidebar .price span { font-size: 0.875rem; font-weight: 400; color: var(--muted-foreground); }
.detail-sidebar .btn { width: 100%; justify-content: center; margin-bottom: 0.75rem; height: 3rem; }
.agent-info { display: flex; align-items: center; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); margin-top: 1.5rem; }
.agent-avatar { width: 3rem; height: 3rem; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--primary); }
.agent-info .name { font-weight: 500; }
.agent-info .creci { font-size: 0.875rem; color: var(--muted-foreground); }
.highlights-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media(min-width:640px){ .highlights-list { grid-template-columns: 1fr 1fr; } }
.highlight-item { display: flex; align-items: center; gap: 0.75rem; color: var(--muted-foreground); }
.highlight-item .check { color: var(--accent); font-size: 1.125rem; }

/* Utility */
.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.leading-relaxed { line-height: 1.7; }
.text-muted { color: var(--muted-foreground); }
.text-sm { font-size: 0.875rem; }

/* WhatsApp Float */
.whatsapp-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; box-shadow: 0 4px 12px rgba(37,211,102,0.4);
  transition: transform 0.3s, background 0.3s;
  animation: pulse-whatsapp 2s infinite;
}
.whatsapp-float:hover { transform: scale(1.1); background: #20bd5a; }
@keyframes pulse-whatsapp {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
}

/* Gallery */
.gallery { border-radius: 1rem; overflow: hidden; }
.gallery-main { position: relative; aspect-ratio: 16/9; background: var(--muted); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.85); border: none; cursor: pointer;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.gallery-nav:hover { background: #fff; }
.gallery-prev { left: 0.75rem; }
.gallery-next { right: 0.75rem; }
.gallery-counter {
  position: absolute; bottom: 0.75rem; right: 0.75rem;
  background: rgba(255,255,255,0.85); padding: 0.25rem 0.75rem;
  border-radius: 1rem; font-size: 0.875rem;
}
.gallery-thumbs { display: flex; gap: 0.5rem; padding: 0.5rem 0; overflow-x: auto; }
.gallery-thumb {
  flex-shrink: 0; width: 5rem; height: 4rem; border-radius: 0.5rem;
  overflow: hidden; border: 2px solid transparent; cursor: pointer;
  opacity: 0.7; transition: opacity 0.2s, border-color 0.2s;
  background: none; padding: 0;
}
.gallery-thumb.active { border-color: var(--primary); opacity: 1; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }