/* ========================================
           VARIABLES CSS
        ======================================== */
        :root {
            --color-primary: #2563EB;
            --color-primary-dark: #1D4ED8;
            --color-primary-light: #EFF6FF;
            --color-text: #1F2937;
            --color-text-secondary: #6B7280;
            --color-text-muted: #9CA3AF;
            --color-bg: #FFFFFF;
            --color-bg-alt: #F9FAFB;
            --color-border: #E5E7EB;
            --color-success: #10B981;
            --color-badge-sale: #374151;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --radius: 8px;
			--radius-sm: 6px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --transition: all 0.3s ease;
			--venta: #2563EB;
			--alquiler: orange;
			--gray-100: #F3F4F6;
			--gray-300: #D1D5DB;
			--gray-600: #4B5563;
			--gray-900: #111827;
			--heart-active: #EF4444;
			--shadow-card: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
			--shadow-elevated: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
			--background: 0 0% 100%;
			--foreground: 222.2 84% 4.9%;
			--card: 0 0% 100%;
			--card-foreground: 222.2 84% 4.9%;
			--popover: 0 0% 100%;
			--popover-foreground: 222.2 84% 4.9%;
			--primary: 222.2 47.4% 11.2%;
			--primary-foreground: 210 40% 98%;
			--secondary: 210 40% 96.1%;
			--secondary-foreground: 222.2 47.4% 11.2%;
			--muted: 210 40% 96.1%;
			--muted-foreground: 215.4 16.3% 46.9%;
			--accent: 210 40% 96.1%;
			--accent-foreground: 222.2 47.4% 11.2%;
			--destructive: 0 84.2% 60.2%;
			--destructive-foreground: 210 40% 98%;
			--border: 214.3 31.8% 91.4%;
			--input: 214.3 31.8% 91.4%;
			--ring: 222.2 84% 4.9%;
			--radius: 0.5rem;
        }

        /* ========================================
           RESET Y BASE
        ======================================== */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: var(--color-text);
            background-color: var(--color-bg);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        button {
            border: none;
            background: none;
            cursor: pointer;
            font-family: inherit;
        }

        img {
            max-width: 100%;
            display: block;
        }

        ul {
            list-style: none;
        }

        /* ========================================
           UTILIDADES
        ======================================== */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 16px;
        }

        .flex {
            display: flex;
        }

        .items-center {
            align-items: center;
        }

        .justify-between {
            justify-content: space-between;
        }

        .hidden {
            display: none !important;
        }

        .text-primary { color: var(--color-primary); }
        .text-secondary { color: var(--color-text-secondary); }
        .text-muted { color: var(--color-text-muted); }

        .font-medium { font-weight: 500; }
        .font-semibold { font-weight: 600; }
        .font-bold { font-weight: 700; }

        /* ========================================
           BOTONES
        ======================================== */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: var(--radius);
            font-size: 14px;
            font-weight: 500;
            transition: var(--transition);
            cursor: pointer;
        }

        .btn-primary {
            background-color: var(--color-primary);
            color: white;
            border: 1px solid var(--color-primary);
        }

        .btn-primary:hover {
            background-color: var(--color-primary-dark);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--color-text);
            border: 1px solid var(--color-border);
        }

        .btn-outline:hover {
            background-color: var(--color-bg-alt);
        }

        .btn-white {
            background-color: white;
            color: var(--color-text);
            border: 1px solid var(--color-border);
        }

        /* ========================================
           HEADER / NAVBAR
        ======================================== */
        .header {
            position: sticky;
            top: 0;
            z-index: 100;
            background-color: white;
            border-bottom: 1px solid var(--color-border);
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px;
        }
		
		.header_menu_item.active{
			color: var(--color-primary)
		}

        .logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 20px;
            font-weight: 700;
            color: var(--color-primary);
        }

        .logo i {
            font-size: 24px;
        }

        .nav-links {
            display: none;
            align-items: center;
            gap: 28px;
        }

        .nav-links a {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text);
            transition: var(--transition);
        }

        .nav-links a:hover {
            color: var(--color-primary);
        }

        .nav-links a i {
            font-size: 10px;
            margin-left: 4px;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .nav-actions .btn-login {
            display: none;
        }

        .btn-saved {
            display: none;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text);
        }

        .btn-menu {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--color-text);
            border-radius: var(--radius);
        }

        .btn-menu:hover {
            background-color: var(--color-bg-alt);
        }

        /* Mobile Menu Overlay */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: white;
            z-index: 200;
            padding: 20px;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }

        .mobile-menu.active {
            transform: translateX(0);
        }

        .mobile-menu-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 32px;
        }

        .mobile-menu-links {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .mobile-menu-links a {
            padding: 14px 0;
            font-size: 16px;
            font-weight: 500;
            border-bottom: 1px solid var(--color-border);
        }

        /* ========================================
           HERO SECTION
        ======================================== */
        .hero {
            position: relative;
            min-height: 500px;
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=1400&q=80') center/cover no-repeat;
            display: flex;
            align-items: flex-end;
            padding-bottom: 80px;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
            padding-top: 60px;
        }

        .hero-title {
            font-size: 32px;
            font-weight: 700;
            color: white;
            line-height: 1.2;
            margin-bottom: 12px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .hero-subtitle {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 32px;
            line-height: 1.6;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }

        /* ========================================
           SEARCH WIDGET
        ======================================== */
        .search-widget {
            background: white;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
        }

        .search-tabs {
            display: flex;
            border-bottom: 1px solid var(--color-border);
        }

        .search-tab {
            flex: 1;
            padding: 14px;
            font-size: 13px;
            font-weight: 600;
            color: var(--color-text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            transition: var(--transition);
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }

        .search-tab i {
            font-size: 14px;
        }

        .search-tab.active {
            color: var(--color-primary);
            border-bottom-color: var(--color-primary);
            background-color: var(--color-primary-light);
        }

        .search-tab:hover:not(.active) {
            color: var(--color-text);
            background-color: var(--color-bg-alt);
        }

        .search-body {
            padding: 16px;
        }

        .search-input-wrap {
            position: relative;
            margin-bottom: 12px;
        }

        .search-input-wrap input {
            width: 100%;
            padding: 14px 44px 14px 16px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            font-size: 14px;
            font-family: inherit;
            outline: none;
            transition: var(--transition);
        }

        .search-input-wrap input:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .search-input-wrap .icon-search {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--color-text-muted);
            font-size: 16px;
        }

        .search-filters {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin-bottom: 12px;
        }

        .filter-select {
            position: relative;
        }

        .filter-select select {
            width: 100%;
            padding: 12px 36px 12px 14px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            font-size: 13px;
            font-family: inherit;
            color: var(--color-text);
            background-color: white;
            appearance: none;
            cursor: pointer;
            outline: none;
        }

        .filter-select::after {
            content: '\f107';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--color-text-muted);
            font-size: 12px;
            pointer-events: none;
        }

        .btn-search {
            width: 100%;
            padding: 14px;
            font-size: 15px;
            font-weight: 600;
            border-radius: var(--radius);
        }

        /* ========================================
           CATEGORĶAS
        ======================================== */
        .section {
            padding: 48px 0;
        }

        .section-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 24px;
        }

        .categories-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .category-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 20px 12px;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            transition: var(--transition);
            cursor: pointer;
        }

        .category-card:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .category-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: var(--color-primary);
            margin-bottom: 10px;
        }

        .category-name {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .category-desc {
            font-size: 11px;
            color: var(--color-text-muted);
        }

        /* ========================================
           CASAS DESTACADAS
        ======================================== */
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .link-view-all {
            font-size: 14px;
            font-weight: 600;
            color: var(--color-primary);
        }

        .link-view-all:hover {
            text-decoration: underline;
        }

        .properties-wrapper {
            position: relative;
        }

        .properties-slider {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 8px;
            scrollbar-width: none;
        }

        .properties-slider::-webkit-scrollbar {
            display: none;
        }

        .property-card {
            flex: 0 0 85%;
            scroll-snap-align: start;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: white;
            transition: var(--transition);
        }

        .property-card:hover {
            box-shadow: var(--shadow-lg);
        }

        .property-image {
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .property-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .property-card:hover .property-image img {
            transform: scale(1.05);
        }

        .property-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .badge-new {
            background-color: var(--color-success);
            color: white;
        }

        .badge-sale {
            background-color: var(--color-badge-sale);
            color: white;
        }

        .btn-favorite {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        .btn-favorite:hover {
            transform: scale(1.1);
        }

        .btn-favorite i {
            color: var(--color-text-muted);
            font-size: 14px;
            transition: var(--transition);
        }

        .btn-favorite.active i,
        .btn-favorite:hover i {
            color: #EF4444;
        }

        .property-info {
            padding: 16px;
        }
		
		.property-type{
			padding: 10px 16px 0px 16px;
			margin-bottom: -5px;
			font-size: 11px;
			border-top: 3px solid;
		}
		
		.property-type.venta{
			border-top-color: var(--venta)
		}
		.property-type.alquiler{
			border-top-color: var(--alquiler)
		}
		
		.property-type-operation{
			font-weight: 600;
			text-transform: uppercase;
		}
		
		.property-type-operation.venta{
			color: var(--venta)
		}
		
		.property-type-operation.alquiler{
			color: var(--alquiler)
		}
		
		.property-type-prop{
			float: right;
			color: var(--color-text-secondary)
		}

        .property-price {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .property-address {
            font-size: 13px;
            color: var(--color-text-secondary);
            margin-bottom: 12px;
        }

        .property-details {
            display: flex;
            gap: 12px;
            font-size: 12px;
            color: var(--color-text-secondary);
        }

        .property-details span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .property-details i {
            font-size: 13px;
            color: var(--color-text-muted);
        }

        .slider-arrow {
            position: absolute;
            top: 100px;
            width: 36px;
            height: 36px;
            background: white;
            border-radius: 50%;
            box-shadow: var(--shadow-md);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 5;
            transition: var(--transition);
        }

        .slider-arrow:hover {
            background: var(--color-primary);
            color: white;
        }

        .slider-arrow.prev { left: -18px; }
        .slider-arrow.next { right: -18px; }

        /* ========================================
           FEATURES / FOOTER
        ======================================== */
        .features-section {
            background-color: var(--color-bg-alt);
            padding: 48px 0 86px 0;
            border-top: 1px solid var(--color-border);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
        }

        .feature-item {
            text-align: center;
        }

        .feature-icon {
            font-size: 28px;
            color: var(--color-primary);
            margin-bottom: 12px;
        }

        .feature-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .feature-desc {
            font-size: 13px;
            color: var(--color-text-secondary);
            line-height: 1.5;
        }

        /* ========================================
           BOTTOM NAV (Mobile)
        ======================================== */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid var(--color-border);
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            z-index: 100;
        }

        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 4px 12px;
            font-size: 10px;
            color: var(--color-text-muted);
            transition: var(--transition);
        }

        .bottom-nav-item i {
            font-size: 20px;
        }

        .bottom-nav-item.active {
            color: var(--color-primary);
        }

        /* ========================================
           RESPONSIVE - TABLET
        ======================================== */
        @media (min-width: 640px) {
            .hero-title {
                font-size: 42px;
            }

            .categories-grid {
                grid-template-columns: repeat(5, 1fr);
            }

            .category-card {
                padding: 24px 16px;
            }

            .search-filters {
                grid-template-columns: repeat(2, 1fr);
            }

            .features-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* ========================================
           RESPONSIVE - DESKTOP
        ======================================== */
        @media (min-width: 1024px) {
            .container {
                padding: 0 24px;
            }

            /* Header */
            .nav-links {
                display: flex;
            }

            .btn-menu {
                display: none !important;
            }

            .btn-saved {
                display: flex;
            }

            .nav-actions .btn-login {
                display: inline-flex;
            }

            /* Hero */
            .hero {
                min-height: 560px;
                padding-bottom: 60px;
                align-items: center;
            }

            .hero-content {
                padding-top: 0;
            }

            .hero-title {
                font-size: 52px;
                max-width: 600px;
            }

            .hero-subtitle {
                font-size: 16px;
                max-width: 500px;
            }

            /* Search Widget */
            .search-widget {
                max-width: 700px;
            }

            .search-tabs {
                justify-content: flex-start;
            }

            .search-tab {
                flex: none;
                padding: 14px 24px;
                font-size: 14px;
            }

            .search-body {
                padding: 20px;
            }

            .search-input-wrap {
                margin-bottom: 12px;
            }

            .search-input-wrap input {
                padding: 16px 48px 16px 18px;
                font-size: 15px;
            }

            .search-filters {
                display: flex;
                gap: 10px;
                margin-bottom: 0;
				margin-top: 10px
            }

            .filter-select {
                flex: 1;
            }

            .filter-select select {
                padding: 14px 36px 14px 14px;
            }

            .search-row {
                display: flex;
                gap: 10px;
				margin-bottom: 10px
            }

            .search-row .search-input-wrap {
                flex: 1;
                margin-bottom: 0;
            }

            .btn-search {
                width: auto;
                padding: 14px 32px;
                align-self: flex-end;
            }

            /* Properties */
            .properties-slider {
                overflow-x: visible;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 20px;
            }

            .property-card {
                flex: none;
            }

            .slider-arrow {
                display: none !important;
            }

            /* Bottom Nav */
            .bottom-nav {
                display: none !important;
            }

            /* Sections */
            .section {
                padding: 64px 0;
            }

            .features-section {
                padding: 64px 0;
            }
        }

        /* ========================================
           ANIMACIONES
        ======================================== */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-in {
            animation: fadeInUp 0.6s ease forwards;
        }

        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
		
		
		
		
		
		
		
		
		
		
		/* ========================================
           MAP SECTION
        ======================================== */
		
		.div_container{
			display: none
		}
		
				
		/* ========== FILTER BAR ========== */
		.filter-bar {
		  position: fixed;
		  top: 60px;
		  left: 0;
		  right: 0;
		  height: 72px;
		  background: var(--color-bg-alt);
		  border-bottom: 1px solid var(--color-border);
		  display: flex;
		  align-items: center;
		  padding: 0 24px;
		  gap: 12px;
		  z-index: 9;
		}

		.filter-input-group {
		  position: relative;
		  flex-shrink: 0;
		}

		.filter-input-group .icon-left {
		  position: absolute;
		  left: 12px;
		  top: 50%;
		  transform: translateY(-50%);
		  color: var(--color-text-muted);
		  font-size: 14px;
		}

		.filter-input {
		  width: 220px;
		  padding: 10px 14px 10px 38px;
		  border: 1px solid var(--color-border);
		  border-radius: var(--radius);
		  background: var(--color-bg);
		  font-size: 14px;
		  font-family: 'Inter', sans-serif;
		  color: var(--color-badge-sale);
		  outline: none;
		  transition: border-color 150ms ease;
		}

		.filter-input:focus {
		  border-color: var(--color-primary);
		}

		.filter-dropdown {
		  position: relative;
		  flex-shrink: 0;
		}

		.filter-dropdown-btn {
		  display: flex;
		  align-items: center;
		  gap: 8px;
		  padding: 10px 14px;
		  border: 1px solid var(--color-border);
		  border-radius: var(--radius);
		  background: var(--color-bg);
		  font-size: 14px;
		  font-family: 'Inter', sans-serif;
		  color: var(--color-badge-sale);
		  cursor: pointer;
		  transition: all 150ms ease;
		  min-width: 130px;
		  white-space: nowrap;
		}

		.filter-dropdown-btn:hover {
		  border-color: var(--gray-300);
		}

		.filter-dropdown-btn i {
		  font-size: 10px;
		  color: var(--color-text-muted);
		  margin-left: auto;
		}

		.filter-dropdown-panel {
		  position: absolute;
		  top: calc(100% + 4px);
		  left: 0;
		  min-width: 200px;
		  background: var(--color-bg);
		  border: 1px solid var(--color-border);
		  border-radius: var(--radius);
		  box-shadow: var(--shadow-elevated);
		  padding: 12px;
		  opacity: 0;
		  visibility: hidden;
		  transform: translateY(-4px);
		  transition: all 150ms ease;
		  z-index: 200;
		}

		.filter-dropdown.open .filter-dropdown-panel {
		  opacity: 1;
		  visibility: visible;
		  transform: translateY(0);
		}

		.filter-dropdown-option {
		  padding: 8px 12px;
		  font-size: 14px;
		  color: var(--color-badge-sale);
		  cursor: pointer;
		  border-radius: var(--radius-sm);
		  transition: background 100ms ease;
		}

		.filter-dropdown-option:hover {
		  background: var(--color-bg-alt);
		}

		.btn-more-filters {
		  display: flex;
		  align-items: center;
		  gap: 8px;
		  padding: 10px 14px;
		  border: 1px solid var(--color-border);
		  border-radius: var(--radius);
		  background: var(--color-bg);
		  font-size: 14px;
		  font-family: 'Inter', sans-serif;
		  color: var(--color-badge-sale);
		  cursor: pointer;
		  transition: all 150ms ease;
		  flex-shrink: 0;
		  white-space: nowrap;
		}

		.btn-more-filters:hover {
		  background: var(--color-bg-alt);
		}

		.filter-badge {
		  display: inline-flex;
		  align-items: center;
		  justify-content: center;
		  width: 18px;
		  height: 18px;
		  background: var(--color-primary);
		  color: var(--color-bg);
		  font-size: 11px;
		  font-weight: 600;
		  border-radius: 9999px;
		}

		.btn-save-search {
		  padding: 10px 18px;
		  background: var(--color-primary);
		  color: var(--color-bg);
		  border: none;
		  border-radius: var(--radius);
		  font-size: 14px;
		  font-weight: 500;
		  font-family: 'Inter', sans-serif;
		  cursor: pointer;
		  transition: background 150ms ease;
		  flex-shrink: 0;
		  white-space: nowrap;
		}

		.btn-save-search:hover {
		  background: var(--color-primary-dark);
		}

		/* ========== MAIN LAYOUT ========== */
		.main-content {
		  display: flex;
		  height: calc(100vh - 136px);
		  margin-top: 64px;
		}

		/* ========== PROPERTY LIST ========== */
		.property-list-col {
		  width: 32%;
		  min-width: 320px;
		  max-width: 420px;
		  background: var(--color-bg);
		  border-right: 1px solid var(--color-border);
		  overflow-y: auto;
		  padding: 20px 16px;
		  flex-shrink: 0;
		}

		.list-header {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  margin-bottom: 16px;
		}

		.list-title {
		  font-size: 28px;
		  font-weight: 700;
		  color: var(--gray-900);
		  line-height: 1.2;
		}

		.list-count {
		  font-size: 13px;
		  color: var(--color-bg-alt0);
		  margin-top: 4px;
		}

		.sort-dropdown-btn {
		  display: flex;
		  align-items: center;
		  gap: 6px;
		  padding: 8px 12px;
		  border: 1px solid var(--color-border);
		  background: var(--color-bg);
		  border-radius: var(--radius);
		  font-size: 13px;
		  font-family: 'Inter', sans-serif;
		  color: var(--color-badge-sale);
		  cursor: pointer;
		  white-space: nowrap;
		}

		.sort-dropdown-btn i {
		  font-size: 10px;
		  color: var(--color-text-muted);
		}

		/* ========== PROPERTY GRID ========== */
		.property-grid {
		  display: grid;
		  grid-template-columns: 1fr 1fr;
		  gap: 16px;
		}

		/* ========== PROPERTY CARD ========== */
		.property-card {
		  background: var(--color-bg);
		  border-radius: var(--radius);
		  overflow: hidden;
		  box-shadow: var(--shadow-card);
		  cursor: pointer;
		  transition: box-shadow 200ms ease, transform 200ms ease;
		}

		.property-card:hover {
		  box-shadow: var(--shadow-elevated);
		  transform: translateY(-2px);
		}

		.property-card.selected {
		  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-elevated);
		}

		.card-image-wrapper {
		  position: relative;
		  aspect-ratio: 4 / 3;
		  overflow: hidden;
		}

		.card-image-wrapper img {
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		  transition: transform 300ms ease;
		}

		.property-card:hover .card-image-wrapper img {
		  transform: scale(1.03);
		}

		.card-badge {
		  position: absolute;
		  top: 12px;
		  left: 12px;
		  padding: 4px 10px;
		  border-radius: var(--radius-sm);
		  font-size: 12px;
		  font-weight: 600;
		  color: var(--color-bg);
		  z-index: 2;
		}

		.card-badge.destacada {
		  background: var(--color-primary);
		}

		.card-badge.nuevo {
		  background: var(--color-success);
		}

		.card-badge.oferta {
		  background: #EF4444;
		}

		.card-heart {
		  position: absolute;
		  top: 12px;
		  right: 12px;
		  width: 32px;
		  height: 32px;
		  border-radius: 50%;
		  background: var(--color-bg);
		  box-shadow: var(--shadow-card);
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  cursor: pointer;
		  z-index: 2;
		  transition: transform 150ms ease;
		  border: none;
		}

		.card-heart:hover {
		  transform: scale(1.05);
		}

		.card-heart i {
		  font-size: 14px;
		  color: var(--color-text-muted);
		  transition: color 150ms ease;
		}

		.card-heart.favorited i {
		  color: var(--heart-active);
		}

		@keyframes heartPulse {
		  0% { transform: scale(1); }
		  50% { transform: scale(1.2); }
		  100% { transform: scale(1); }
		}

		.card-heart.pulse {
		  animation: heartPulse 200ms ease;
		}

		.card-info {
		  padding: 12px 16px 16px;
		}

		.card-price {
		  font-size: 20px;
		  font-weight: 600;
		  color: var(--gray-900);
		  margin-bottom: 4px;
		}

		.card-address {
		  font-size: 13px;
		  color: var(--color-bg-alt0);
		  margin-bottom: 8px;
		}

		.card-specs {
		  display: flex;
		  gap: 8px;
		  font-size: 12px;
		  color: var(--color-bg-alt0);
		  margin-bottom: 8px;
		}

		.card-specs i {
		  font-size: 12px;
		  color: var(--color-text-muted);
		  margin-right: 2px;
		}

		.card-type {
		  display: flex;
		  align-items: center;
		  gap: 6px;
		  font-size: 12px;
		  color: var(--color-bg-alt0);
		}

		.card-type .dot {
		  width: 8px;
		  height: 8px;
		  background: var(--color-success);
		  border-radius: 50%;
		  flex-shrink: 0;
		}

		.btn-load-more {
		  width: 100%;
		  margin-top: 16px;
		  padding: 14px;
		  border: 1px solid var(--color-border);
		  background: var(--color-bg);
		  border-radius: var(--radius);
		  font-size: 14px;
		  font-weight: 500;
		  font-family: 'Inter', sans-serif;
		  color: var(--color-badge-sale);
		  cursor: pointer;
		  transition: all 150ms ease;
		}

		.btn-load-more:hover {
		  background: var(--color-bg-alt);
		}
		
		/* .price-marker { */
			/* background: #fff; */
			/* border: 1px solid #dcdcdc; */
			/* border-radius: 20px; */
			/* padding: 6px 10px; */
			/* font-size: 13px; */
			/* font-weight: 700; */
			/* white-space: nowrap; */
			/* box-shadow: 0 2px 8px rgba(0,0,0,.15); */
		/* } */
		
		.price-marker{
			background:#fff;
			border:1px solid #ddd;
			border-radius:20px;
			padding:6px 10px;
			font-weight:bold;
			transition:.2s;
		}

		.price-marker.selected{
			background:#2563eb;
			color:white;
			border-color:#2563eb;
			transform:scale(1.15);
			z-index:999;
		}

		/* ========== MAP COLUMN ========== */
		.map-col {
		  flex: 1;
		  position: relative;
		  background: #e8e8e8;
		  min-width: 0;
		  z-index: 9
		}

		#map {
		  width: 100%;
		  height: 100%;
		}

		/* Map Overlays */
		.map-search-moving {
		  position: absolute;
		  top: 12px;
		  left: 12px;
		  background: var(--color-bg);
		  border: 1px solid var(--color-border);
		  border-radius: var(--radius);
		  padding: 10px 14px;
		  box-shadow: var(--shadow-card);
		  display: flex;
		  align-items: center;
		  gap: 10px;
		  z-index: 8;
		  font-size: 13px;
		  color: var(--color-badge-sale);
		  cursor: pointer;
		}

		.map-search-moving input[type="checkbox"] {
		  width: 16px;
		  height: 16px;
		  accent-color: var(--color-primary);
		  cursor: pointer;
		}

		.map-zoom-controls {
		  position: absolute;
		  right: 12px;
		  top: 50%;
		  transform: translateY(-50%);
		  background: var(--color-bg);
		  border: 1px solid var(--color-border);
		  border-radius: var(--radius);
		  overflow: hidden;
		  z-index: 10;
		  display: flex;
		  flex-direction: column;
		}

		.map-zoom-btn {
		  width: 36px;
		  height: 36px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background: var(--color-bg);
		  border: none;
		  border-bottom: 1px solid var(--color-border);
		  cursor: pointer;
		  color: var(--color-badge-sale);
		  font-size: 14px;
		  transition: background 100ms ease;
		}

		.map-zoom-btn:last-child {
		  border-bottom: none;
		}

		.map-zoom-btn:hover {
		  background: var(--color-bg-alt);
		}

		.map-layers-btn {
		  position: absolute;
		  right: 12px;
		  top: calc(50% + 44px);
		  transform: translateY(-50%);
		  width: 36px;
		  height: 36px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background: var(--color-bg);
		  border: 1px solid var(--color-border);
		  border-radius: var(--radius);
		  cursor: pointer;
		  color: var(--color-badge-sale);
		  font-size: 14px;
		  z-index: 10;
		  transition: background 100ms ease;
		}

		.map-layers-btn:hover {
		  background: var(--color-bg-alt);
		}

		.map-draw-btn {
		  position: absolute;
		  bottom: 20px;
		  left: 50%;
		  transform: translateX(-50%);
		  background: var(--color-bg);
		  border: 1px solid var(--color-border);
		  border-radius: var(--radius);
		  padding: 10px 16px;
		  box-shadow: var(--shadow-card);
		  display: flex;
		  align-items: center;
		  gap: 8px;
		  z-index: 10;
		  font-size: 13px;
		  color: var(--color-badge-sale);
		  cursor: pointer;
		  font-family: 'Inter', sans-serif;
		  transition: background 100ms ease;
		}

		.map-draw-btn:hover {
		  background: var(--color-bg-alt);
		}

		/* Price Pin */
		.price-pin {
		  background: var(--color-bg);
		  border: 1px solid var(--color-border);
		  border-radius: 20px;
		  padding: 6px 12px;
		  font-size: 14px;
		  font-weight: 500;
		  color: var(--gray-900);
		  box-shadow: var(--shadow-card);
		  cursor: pointer;
		  transition: all 150ms ease;
		  white-space: nowrap;
		}

		.price-pin:hover {
		  background: var(--color-primary);
		  color: var(--color-bg);
		  box-shadow: var(--shadow-elevated);
		  transform: scale(1.05);
		}

		.price-pin.active {
		  background: var(--color-primary);
		  color: var(--color-bg);
		}

		/* ========== DETAIL PANEL ========== */
		.detail-col {
		  width: 340px;
		  min-width: 300px;
		  max-width: 380px;
		  background: var(--color-bg);
		  border-left: 1px solid var(--color-border);
		  overflow-y: auto;
		  flex-shrink: 0;
		  display: flex;
		  flex-direction: column;
		}

		.detail-header {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  padding: 12px 16px;
		  border-bottom: 1px solid var(--color-border);
		  flex-shrink: 0;
		}

		.detail-back {
		  display: flex;
		  align-items: center;
		  gap: 6px;
		  font-size: 13px;
		  color: var(--color-bg-alt0);
		  cursor: pointer;
		  background: none;
		  border: none;
		  font-family: 'Inter', sans-serif;
		  transition: color 150ms ease;
		}

		.detail-back:hover {
		  color: var(--color-badge-sale);
		}

		.detail-nav {
		  display: flex;
		  align-items: center;
		  gap: 12px;
		}

		.detail-next {
		  display: flex;
		  align-items: center;
		  gap: 6px;
		  font-size: 13px;
		  color: var(--color-bg-alt0);
		  cursor: pointer;
		  background: none;
		  border: none;
		  font-family: 'Inter', sans-serif;
		  transition: color 150ms ease;
		}

		.detail-next:hover {
		  color: var(--color-badge-sale);
		}

		.detail-close {
		  width: 32px;
		  height: 32px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background: none;
		  border: none;
		  color: var(--color-text-muted);
		  font-size: 16px;
		  cursor: pointer;
		  border-radius: var(--radius-sm);
		  transition: all 150ms ease;
		}

		.detail-close:hover {
		  background: var(--gray-100);
		  color: var(--color-badge-sale);
		}

		.detail-hero {
		  position: relative;
		  aspect-ratio: 16 / 10;
		  overflow: hidden;
		  flex-shrink: 0;
		}

		.detail-hero img {
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		}

		.detail-hero-badge {
		  position: absolute;
		  top: 12px;
		  left: 12px;
		  padding: 4px 10px;
		  background: var(--color-primary);
		  color: var(--color-bg);
		  font-size: 12px;
		  font-weight: 600;
		  border-radius: var(--radius-sm);
		}

		.detail-photo-counter {
		  position: absolute;
		  bottom: 12px;
		  right: 12px;
		  padding: 4px 10px;
		  background: rgba(0,0,0,0.6);
		  color: var(--color-bg);
		  font-size: 12px;
		  border-radius: var(--radius-sm);
		}

		.detail-hero-nav {
		  position: absolute;
		  top: 50%;
		  transform: translateY(-50%);
		  width: 36px;
		  height: 36px;
		  border-radius: 50%;
		  background: rgba(255,255,255,0.8);
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  cursor: pointer;
		  border: none;
		  color: var(--color-badge-sale);
		  font-size: 14px;
		  transition: background 150ms ease;
		}

		.detail-hero-nav:hover {
		  background: rgba(255,255,255,0.95);
		}

		.detail-hero-nav.prev {
		  left: 12px;
		}

		.detail-hero-nav.next {
		  right: 12px;
		}

		.detail-info {
		  padding: 16px;
		  flex-shrink: 0;
		}

		.detail-badge {
		  display: inline-block;
		  padding: 4px 10px;
		  background: var(--color-primary);
		  color: var(--color-bg);
		  font-size: 12px;
		  font-weight: 600;
		  border-radius: var(--radius-sm);
		  margin-bottom: 8px;
		}

		.detail-price {
		  font-size: 28px;
		  font-weight: 700;
		  color: var(--gray-900);
		  margin-top: 8px;
		}

		.detail-address {
		  font-size: 14px;
		  color: var(--color-bg-alt0);
		  margin-top: 4px;
		}

		.detail-specs {
		  display: flex;
		  gap: 16px;
		  margin-top: 12px;
		  font-size: 13px;
		  color: var(--color-bg-alt0);
		}

		.detail-specs i {
		  font-size: 14px;
		  color: var(--color-text-muted);
		  margin-right: 4px;
		}

		.detail-type {
		  display: flex;
		  align-items: center;
		  gap: 6px;
		  margin-top: 8px;
		  font-size: 13px;
		  color: var(--color-bg-alt0);
		}

		.detail-type .dot {
		  width: 8px;
		  height: 8px;
		  background: var(--color-success);
		  border-radius: 50%;
		  flex-shrink: 0;
		}

		.detail-actions {
		  display: flex;
		  gap: 12px;
		  padding: 0 16px;
		  margin-top: 16px;
		  flex-shrink: 0;
		}

		.btn-contact-agent {
		  flex: 1;
		  padding: 12px;
		  background: var(--color-primary);
		  color: var(--color-bg);
		  border: none;
		  border-radius: var(--radius);
		  font-size: 14px;
		  font-weight: 500;
		  font-family: 'Inter', sans-serif;
		  cursor: pointer;
		  text-align: center;
		  transition: background 150ms ease;
		}

		.btn-contact-agent:hover {
		  background: var(--color-primary-dark);
		}

		.btn-save-property {
		  flex: 1;
		  padding: 12px;
		  background: var(--color-bg);
		  border: 1px solid var(--color-border);
		  color: var(--color-badge-sale);
		  border-radius: var(--radius);
		  font-size: 14px;
		  font-weight: 500;
		  font-family: 'Inter', sans-serif;
		  cursor: pointer;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  gap: 6px;
		  transition: background 150ms ease;
		}

		.btn-save-property:hover {
		  background: var(--color-bg-alt);
		}

		.btn-save-property i {
		  font-size: 14px;
		  color: var(--color-text-muted);
		}

		.btn-save-property.favorited i {
		  color: var(--heart-active);
		}

		/* Tabs */
		.detail-tabs {
		  display: flex;
		  gap: 20px;
		  padding: 0 16px;
		  margin-top: 20px;
		  border-bottom: 1px solid var(--color-border);
		  flex-shrink: 0;
		}

		.detail-tab {
		  padding: 10px 0;
		  font-size: 13px;
		  font-family: 'Inter', sans-serif;
		  color: var(--color-bg-alt0);
		  background: none;
		  border: none;
		  border-bottom: 2px solid transparent;
		  cursor: pointer;
		  transition: all 150ms ease;
		  margin-bottom: -1px;
		}

		.detail-tab:hover {
		  color: var(--color-badge-sale);
		}

		.detail-tab.active {
		  color: var(--color-primary);
		  font-weight: 600;
		  border-bottom-color: var(--color-primary);
		}

		.detail-tab-content {
		  padding: 16px;
		  flex: 1;
		  overflow-y: auto;
		}

		.tab-content-section {
		  margin-bottom: 24px;
		}

		.tab-content-title {
		  font-size: 16px;
		  font-weight: 600;
		  color: var(--gray-900);
		  margin-bottom: 12px;
		}

		.tab-content-text {
		  font-size: 14px;
		  color: var(--gray-600);
		  line-height: 1.6;
		}

		.details-table {
		  width: 100%;
		  margin-bottom: 10px;
		}

		.details-table-row {
		  display: flex;
		  justify-content: space-between;
		  padding: 12px 0;
		  border-bottom: 1px solid var(--gray-100);
		  font-size: 13px;
		}

		.details-table-row:last-child {
		  border-bottom: none;
		}

		.details-table-label {
		  color: var(--color-bg-alt0);
		}

		.details-table-value {
		  color: var(--color-badge-sale);
		  font-weight: 500;
		}

		/* ========== BOTTOM NAV (MOBILE) ========== */
		.bottom-nav {
		  display: none;
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  height: 60px;
		  background: var(--color-bg);
		  border-top: 1px solid var(--color-border);
		  z-index: 100;
		}

		.bottom-nav-item {
		  flex: 1;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  gap: 4px;
		  cursor: pointer;
		  text-decoration: none;
		  transition: color 150ms ease;
		}

		.bottom-nav-item i {
		  font-size: 20px;
		}

		.bottom-nav-item span {
		  font-size: 12px;
		}

		.bottom-nav-item.active {
		  color: var(--color-primary);
		}

		.bottom-nav-item:not(.active) {
		  color: var(--color-text-muted);
		}

		/* ========== SKELETON ========== */
		@keyframes shimmer {
		  0% { background-position: -200% 0; }
		  100% { background-position: 200% 0; }
		}

		.skeleton {
		  background: linear-gradient(90deg, var(--gray-100) 25%, var(--color-border) 50%, var(--gray-100) 75%);
		  background-size: 200% 100%;
		  animation: shimmer 1.5s infinite;
		  border-radius: var(--radius-sm);
		}

		/* ========== RESPONSIVE ========== */
		@media (max-width: 1279px) {
		  .property-list-col {
			width: 50%;
			max-width: none;
		  }

		  .detail-col {
			position: fixed;
			top: 132px;
			right: 0;
			bottom: 0;
			width: 400px;
			max-width: none;
			box-shadow: var(--shadow-elevated);
			transform: translateX(100%);
			transition: transform 300ms ease;
			z-index: 50;
		  }

		  .detail-col.open {
			transform: translateX(0);
		  }

		  .detail-overlay {
			display: none;
			position: fixed;
			top: 132px;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,0.3);
			z-index: 49;
		  }

		  .detail-overlay.open {
			display: block;
		  }
		}

		@media (max-width: 767px) {
		  
		  .filter-bar {
			padding: 0 16px;
			gap: 8px;
		  }

		  .filter-input {
			width: 160px;
		  }

		  .btn-save-search {
			display: none;
		  }

		  .main-content {
			flex-direction: column;
			height: calc(100vh - 132px - 60px);
			margin-top: 132px;
			margin-bottom: 60px;
		  }

		  .property-list-col {
			width: 100%;
			min-width: auto;
			max-width: none;
			border-right: none;
			padding: 16px;
		  }

		  .property-grid {
			grid-template-columns: 1fr;
		  }

		  .map-col {
			height: 200px;
			flex: none;
			order: -1;
		  }

		  .detail-col {
			top: 0;
			bottom: 0;
			width: 100%;
			z-index: 200;
		  }

		  .detail-overlay {
			top: 0;
			z-index: 199;
		  }

		  .bottom-nav {
			display: flex;
		  }
		}

		/* Scrollbar styling */
		.property-list-col::-webkit-scrollbar,
		.detail-col::-webkit-scrollbar,
		.detail-tab-content::-webkit-scrollbar {
		  width: 6px;
		}

		.property-list-col::-webkit-scrollbar-track,
		.detail-col::-webkit-scrollbar-track,
		.detail-tab-content::-webkit-scrollbar-track {
		  background: transparent;
		}

		.property-list-col::-webkit-scrollbar-thumb,
		.detail-col::-webkit-scrollbar-thumb,
		.detail-tab-content::-webkit-scrollbar-thumb {
		  background: var(--gray-300);
		  border-radius: 3px;
		}

		.property-list-col::-webkit-scrollbar-thumb:hover,
		.detail-col::-webkit-scrollbar-thumb:hover,
		.detail-tab-content::-webkit-scrollbar-thumb:hover {
		  background: var(--color-text-muted);
		}



/* DETAIL POPUP */

.detail_container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 20px;
}



.breadcrumb{
    background:#fff;
    padding:15px 0;
	font-size: small;
}

.breadcrumb .detail_container{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.breadcrumb a{
	color: var(--color-primary)
}

#popup_detail{
	z-index: 10;
    position: absolute;
    top: 64px;
    background: var(--color-bg);
    width: 100vw;
    overflow-y: auto;
    max-height: calc(100vh - 65px);
}

.property-layout{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:30px;
    margin-top:20px;
}

.gallery{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:12px;
}

.gallery-left img{
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:20px;
}

.gallery-right{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.thumb{
    position:relative;
}

.thumb img{
    width:100%;
    height:254px;
    object-fit:cover;
    border-radius:20px;
}

.thumb span{
    position:absolute;
    bottom:10px;
    left:10px;
    color:white;
    font-size:13px;
}

#popup_detail .detail_container_tabs{
	display: flex;
	width: 100%;
	gap: 20px;
}

#detail_container_div_tab{
	width: 50%;
	max-width: 450px
}

.details{
    margin-top:30px;
}

.details-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.detail-item{
    display:flex;
    gap:15px;
}

.detail-item i{
    color:#2563eb;
    font-size:22px;
}

.detail-item small{
    display:block;
    color:#6b7280;
}

.location{
    margin-top:30px;
	width: 50%;
}

.map-container {
    width:100%;
    height:500px;
    border:none;
    border-radius:20px;
	overflow: hidden
}

#popup_detail_map{
	width: 100%;
	height: 100%
}

#map iframe{
	height: 100%
}

.sidebar{
    position:sticky;
    top:20px;
    height:max-content;
}

.card{
    background:white;
    border-radius:20px;
    padding:24px;
    margin-bottom:20px;
    border:1px solid #e5e7eb;
}

.price{
    font-size:48px;
    font-weight:700;
    margin-bottom:15px;
}

.summary{
    margin-top:10px;
}

.status{
    color:#16a34a;
    margin:20px 0;
}


.btn-secondary{
    width:100%;
    height:52px;
    border-radius:12px;
    cursor:pointer;
}

.agent{
    display:flex;
    gap:15px;
    margin-top:15px;
}

.agent img{
    width:60px;
    height:60px;
    border-radius:50%;
}

.mortgage-row{
    display:flex;
    justify-content:space-between;
    margin:15px 0;
}

.neighborhood{
    margin:50px 0;
}

@media(max-width:1200px){

    .property-layout{
        grid-template-columns:1fr;
    }

    .sidebar{
        position:relative;
    }
	
	#popup_detail .detail_container_tabs{
		display: block;
		width: 100%;
	}
	
	#detail_container_div_tab{
		width: 100%;
	}

	.location{
		width:100%;
	}
}

@media(max-width:768px){

    .menu{
        display:none;
    }

    .gallery{
        grid-template-columns:1fr;
    }

    .gallery-right{
        grid-template-columns:1fr 1fr;
    }

    .gallery-left img{
        height:350px;
    }

    .thumb img{
        height:180px;
    }

    .details-grid{
        grid-template-columns:1fr;
    }

    .tabs{
        overflow:auto;
        white-space:nowrap;
    }

    .price{
        font-size:38px;
    }
	
	#popup_detail .detail_container_tabs{
		display: block;
		width: 100%;
	}

	#detail_container_div_tab{
		width: 100%;
	}
	.location{
		width:100%;
	}

}