<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unir Propiedades | Tasador con IA en San Juan</title>
    <meta name="description" content="Tasá tu propiedad en San Juan con estimación instantánea. Martillero Público Matriculado.">
    
    <!-- Tailwind CSS (Diseño moderno sin instalaciones) -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Google Fonts: Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Configuración de colores personalizados -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'] },
                    colors: {
                        brand: {
                            50: '#f0f4f8',
                            100: '#d9e2ec',
                            500: '#334e68',
                            800: '#102a43', // Azul corporativo profundo
                            900: '#061523',
                        },
                        accent: {
                            400: '#fbbf24', // Ámbar/Dorado para CTAs
                            500: '#f59e0b',
                            600: '#d97706',
                        },
                        whatsapp: '#25D366'
                    }
                }
            }
        }
    </script>
    
    <style>
        /* Estilos adicionales para suavidad */
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        .gradient-hero {
            background: linear-gradient(135deg, #061523 0%, #102a43 100%);
        }
        .input-field {
            @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand-800 focus:ring-2 focus:ring-brand-100 outline-none transition-all duration-200 bg-white;
        }
        .label-field {
            @apply block text-sm font-semibold text-gray-700 mb-1;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 antialiased">

    <!-- Navegación -->
    <nav class="fixed w-full z-50 glass-effect border-b border-gray-200 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
                <div class="flex items-center gap-2">
                    <div class="w-10 h-10 bg-brand-800 rounded-lg flex items-center justify-center text-white font-bold text-xl">U</div>
                    <div>
                        <h1 class="text-xl font-bold text-brand-900 leading-tight">Unir Propiedades</h1>
                        <p class="text-xs text-gray-500 font-medium">Portal Inmobiliario · San Juan</p>
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#tasador" class="text-gray-600 hover:text-brand-800 font-medium transition">Tasar mi propiedad</a>
                    <a href="#zonas" class="text-gray-600 hover:text-brand-800 font-medium transition">Zonas</a>
                    <a href="#vender" class="text-gray-600 hover:text-brand-800 font-medium transition">Vender / Alquilar</a>
                    <a href="https://wa.me/5492645448302" target="_blank" class="bg-whatsapp hover:bg-green-600 text-white px-5 py-2.5 rounded-full font-semibold flex items-center gap-2 transition shadow-lg shadow-green-200">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                        WhatsApp
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="gradient-hero pt-32 pb-20 px-4 sm:px-6 lg:px-8 text-white relative overflow-hidden">
        <div class="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
        <div class="max-w-4xl mx-auto text-center relative z-10">
            <div class="inline-block bg-accent-500/20 border border-accent-400/30 text-accent-400 px-4 py-1.5 rounded-full text-sm font-semibold mb-6 backdrop-blur-sm">
                ✨ Estimación instantánea con IA
            </div>
            <h2 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6 leading-tight">
                Descubrí cuánto vale tu propiedad <span class="text-accent-400">hoy mismo</span>
            </h2>
            <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
                Cargá los datos de tu propiedad y obtené una estimación preliminar de mercado en segundos. 
                <span class="text-white font-semibold">Gratis y sin compromiso.</span>
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="#tasador" class="bg-accent-500 hover:bg-accent-600 text-brand-900 font-bold px-8 py-4 rounded-xl text-lg transition shadow-lg shadow-accent-500/30 flex items-center justify-center gap-2">
                    Calcular mi propiedad ↓
                </a>
                <a href="#vender" class="bg-white/10 hover:bg-white/20 border border-white/30 text-white font-semibold px-8 py-4 rounded-xl text-lg transition backdrop-blur-sm">
                    Quiero vender o alquilar
                </a>
            </div>
        </div>
    </section>

    <!-- Formulario Tasador -->
    <section id="tasador" class="py-20 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto -mt-10 relative z-20">
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-100 overflow-hidden">
            <div class="bg-brand-800 px-8 py-6 border-b border-brand-700">
                <h3 class="text-2xl font-bold text-white flex items-center gap-3">
                    <svg class="w-8 h-8 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                    Tasador con IA
                </h3>
                <p class="text-brand-100 mt-2 text-sm">Completá el formulario para armar una estimación preliminar. El valor final certificado lo define la visita del martillero público.</p>
            </div>
            
            <form id="tasadorForm" class="p-8 space-y-8">
                <!-- Ubicación y Tipo -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="label-field">Departamento / Zona</label>
                        <select name="zona" class="input-field" required>
                            <option value="">Seleccionar...</option>
                            <option value="Capital">Capital (Ciudad de San Juan)</option>
                            <option value="Rivadavia">Rivadavia</option>
                            <option value="Chimbas">Chimbas</option>
                            <option value="Santa Lucía">Santa Lucía</option>
                            <option value="Rawson">Rawson</option>
                            <option value="Pocito">Pocito</option>
                            <option value="Zonda">Zonda</option>
                            <option value="Caucete">Caucete</option>
                            <option value="San Martín">San Martín</option>
                            <option value="Otro">Otro departamento</option>
                        </select>
                    </div>
                    <div>
                        <label class="label-field">Tipo de propiedad</label>
                        <select name="tipo" class="input-field" required>
                            <option value="Casa">Casa</option>
                            <option value="Departamento">Departamento</option>
                            <option value="Terreno">Terreno</option>
                            <option value="Rural">Rural / Finca</option>
                            <option value="Industrial">Local / Industrial</option>
                        </select>
                    </div>
                </div>

                <!-- Medidas y Lote -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="label-field">M² cubiertos</label>
                        <input type="number" name="m2cubiertos" class="input-field" placeholder="Ej: 120" required>
                    </div>
                    <div>
                        <label class="label-field">M² de terreno</label>
                        <input type="number" name="m2terreno" class="input-field" placeholder="Ej: 300">
                    </div>
                    <div>
                        <label class="label-field">Carácter de la zona</label>
                        <select name="caracter" class="input-field">
                            <option value="Urbana">Urbana (servicios completos)</option>
                            <option value="Semi rural">Semi rural (servicios parciales)</option>
                            <option value="Rural">Rural (sin servicios urbanos)</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="label-field">Frente del lote (m)</label>
                        <input type="number" name="frente" class="input-field" placeholder="Ej: 10">
                    </div>
                    <div>
                        <label class="label-field">Fondo del lote (m)</label>
                        <input type="number" name="fondo" class="input-field" placeholder="Ej: 30">
                    </div>
                    <div>
                        <label class="label-field">Forma del lote</label>
                        <select name="forma" class="input-field">
                            <option value="Regular">Regular</option>
                            <option value="Irregular">Irregular</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="label-field">Ubicación del lote</label>
                        <select name="ubicacion_lote" class="input-field">
                            <option value="Medianera">Medianera (entre lotes)</option>
                            <option value="Esquina">Esquina</option>
                            <option value="Doble frente">Doble frente / interno con salida</option>
                        </select>
                    </div>
                    <div>
                        <label class="label-field">Coeficiente de medidas</label>
                        <select name="coeficiente" class="input-field">
                            <option value="No aplicar">No aplicar</option>
                            <option value="Fitte y Cervini">Fitte y Cervini (barrios) — lote tipo 11×30</option>
                            <option value="TTN">Tribunal de Tasaciones (TTN) — lote tipo 10×30, zona céntrica/PH</option>
                        </select>
                    </div>
                </div>

                <!-- Características Internas -->
                <div class="border-t border-gray-200 pt-6">
                    <h4 class="text-lg font-bold text-brand-800 mb-4">Características y Estado</h4>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div>
                            <label class="label-field">M² semicubiertos</label>
                            <input type="number" name="m2semi" class="input-field" placeholder="0">
                        </div>
                        <div>
                            <label class="label-field">Ambientes</label>
                            <input type="number" name="ambientes" class="input-field" placeholder="Ej: 3">
                        </div>
                        <div>
                            <label class="label-field">Antigüedad (años)</label>
                            <input type="number" name="antiguedad" class="input-field" placeholder="Ej: 15">
                        </div>
                        <div>
                            <label class="label-field">Estado general</label>
                            <select name="estado" class="input-field">
                                <option value="A estrenar">A estrenar</option>
                                <option value="Muy bueno" selected>Muy bueno</option>
                                <option value="Bueno">Bueno</option>
                                <option value="A refaccionar">A refaccionar</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Factores -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 border-t border-gray-200 pt-6">
                    <div class="bg-green-50 p-5 rounded-xl border border-green-100">
                        <h5 class="font-bold text-green-800 mb-3 flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                            Factores que suman valor
                        </h5>
                        <div class="space-y-2">
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="suma" value="Cochera" class="rounded text-brand-800 focus:ring-brand-800"> <span class="text-sm text-gray-700">Cochera</span></label>
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="suma" value="Pileta" class="rounded text-brand-800 focus:ring-brand-800"> <span class="text-sm text-gray-700">Pileta</span></label>
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="suma" value="Quincho/parrilla" class="rounded text-brand-800 focus:ring-brand-800"> <span class="text-sm text-gray-700">Quincho / parrilla</span></label>
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="suma" value="Vista panoramica" class="rounded text-brand-800 focus:ring-brand-800"> <span class="text-sm text-gray-700">Vista panorámica / al cerro</span></label>
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="suma" value="Barrio cerrado" class="rounded text-brand-800 focus:ring-brand-800"> <span class="text-sm text-gray-700">Barrio cerrado / seguridad privada</span></label>
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="suma" value="Servicios completos" class="rounded text-brand-800 focus:ring-brand-800"> <span class="text-sm text-gray-700">Gas natural + cloaca + pavimento</span></label>
                        </div>
                    </div>
                    
                    <div class="bg-red-50 p-5 rounded-xl border border-red-100">
                        <h5 class="font-bold text-red-800 mb-3 flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
                            Factores que restan valor
                        </h5>
                        <div class="space-y-2">
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="resta" value="Titulo no perfeccionado" class="rounded text-red-600 focus:ring-red-600"> <span class="text-sm text-gray-700">Título no perfeccionado</span></label>
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="resta" value="Zona inundable" class="rounded text-red-600 focus:ring-red-600"> <span class="text-sm text-gray-700">Zona inundable / riesgo hídrico</span></label>
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="resta" value="Cercania basural" class="rounded text-red-600 focus:ring-red-600"> <span class="text-sm text-gray-700">Cercanía a basural o agua contaminada</span></label>
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="resta" value="Sobre avenida" class="rounded text-red-600 focus:ring-red-600"> <span class="text-sm text-gray-700">Sobre avenida de tránsito pesado / ruido</span></label>
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="resta" value="Patologias estructurales" class="rounded text-red-600 focus:ring-red-600"> <span class="text-sm text-gray-700">Patologías estructurales (rajaduras)</span></label>
                            <label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" name="resta" value="Servidumbre de paso" class="rounded text-red-600 focus:ring-red-600"> <span class="text-sm text-gray-700">Servidumbre de paso o restricción de uso</span></label>
                        </div>
                    </div>
                </div>

                <!-- Método de Renta y Contacto -->
                <div class="border-t border-gray-200 pt-6 bg-gray-50 p-6 rounded-xl">
                    <h4 class="text-lg font-bold text-brand-800 mb-4">Método de la renta (Opcional) y Contacto</h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <label class="label-field">Renta mensual estimada (ARS)</label>
                            <input type="number" name="renta" class="input-field" placeholder="Ej: 150000">
                        </div>
                        <div>
                            <label class="label-field">Tasa de capitalización mensual %</label>
                            <input type="number" name="tasa" class="input-field" placeholder="0.8" step="0.1" value="0.8">
                        </div>
                        <div>
                            <label class="label-field">Cotización dólar de referencia (ARS)</label>
                            <input type="number" name="dolar" class="input-field" placeholder="Ej: 1000" required>
                        </div>
                    </div>
                    <div class="mt-6">
                        <label class="label-field">Tu WhatsApp (para enviarte el detalle)</label>
                        <input type="tel" name="whatsapp" class="input-field" placeholder="Ej: 2645123456" required>
                    </div>
                </div>

                <!-- Botón de Acción -->
                <div class="pt-4">
                    <button type="submit" class="w-full bg-brand-800 hover:bg-brand-900 text-white font-bold py-4 rounded-xl text-lg transition shadow-xl flex items-center justify-center gap-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                        Calcular estimación →
                    </button>
                    <p class="text-center text-xs text-gray-500 mt-4 max-w-2xl mx-auto">
                        <strong>Importante:</strong> Esta cifra surge de un cálculo automático orientativo. No reemplaza la tabla oficial completa ni una tasación certificada. Para un valor con validez legal y firma de martillero público, pedí la tasación completa (se bonifica si publicás con Unir Propiedades).
                    </p>
                </div>
            </form>
        </div>
    </section>

    <!-- Resultado (Oculto inicialmente) -->
    <section id="resultado" class="hidden py-10 px-4 max-w-3xl mx-auto">
        <div class="bg-gradient-to-br from-brand-800 to-brand-900 rounded-2xl shadow-2xl p-8 text-center text-white border border-brand-700">
            <div class="inline-block bg-accent-500 text-brand-900 font-bold px-4 py-1 rounded-full text-sm mb-4">Estimación Preliminar</div>
            <h3 class="text-3xl font-bold mb-2">Tu propiedad estaría valorada en:</h3>
            <div class="text-5xl md:text-6xl font-extrabold text-accent-400 my-6" id="resultadoUSD">USD 0</div>
            <div class="text-2xl text-gray-300 mb-8" id="resultadoARS">≈ $0 ARS</div>
            
            <div class="bg-white/10 rounded-xl p-6 mb-8 text-left backdrop-blur-sm">
                <p class="text-sm text-gray-300 mb-4">Para obtener el <strong>valor certificado con firma de Martillero Público</strong> (bonificado al publicar con nosotros), envianos estos datos directamente:</p>
                <a id="btnWhatsApp" href="#" target="_blank" class="block w-full bg-whatsapp hover:bg-green-600 text-white font-bold py-4 rounded-xl text-lg transition flex items-center justify-center gap-3">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                    Enviar datos a un Martillero por WhatsApp
                </a>
            </div>
        </div>
    </section>

    <!-- Zonas -->
    <section id="zonas" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h3 class="text-3xl font-bold text-brand-900">Buscar por zona</h3>
                <p class="text-gray-600 mt-2">Conocemos cada departamento de cerca.</p>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="bg-brand-50 p-6 rounded-xl border border-brand-100 hover:shadow-lg transition text-center group cursor-pointer">
                    <div class="text-3xl mb-3">🏙️</div>
                    <h4 class="font-bold text-brand-900 group-hover:text-accent-600 transition">CAPITAL</h4>
                    <p class="text-sm text-gray-600">Ciudad de San Juan</p>
                </div>
                <div class="bg-brand-50 p-6 rounded-xl border border-brand-100 hover:shadow-lg transition text-center group cursor-pointer">
                    <div class="text-3xl mb-3">🏘️</div>
                    <h4 class="font-bold text-brand-900 group-hover:text-accent-600 transition">GRAN SAN JUAN</h4>
                    <p class="text-sm text-gray-600">Rivadavia · Chimbas</p>
                </div>
                <div class="bg-brand-50 p-6 rounded-xl border border-brand-100 hover:shadow-lg transition text-center group cursor-pointer">
                    <div class="text-3xl mb-3">🌾</div>
                    <h4 class="font-bold text-brand-900 group-hover:text-accent-600 transition">RURAL</h4>
                    <p class="text-sm text-gray-600">Pocito · Zonda</p>
                </div>
                <div class="bg-brand-50 p-6 rounded-xl border border-brand-100 hover:shadow-lg transition text-center group cursor-pointer">
                    <div class="text-3xl mb-3">⛰️</div>
                    <h4 class="font-bold text-brand-900 group-hover:text-accent-600 transition">SIERRA</h4>
                    <p class="text-sm text-gray-600">Calingasta · Iglesia</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Propiedades Destacadas -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h3 class="text-3xl font-bold text-brand-900 mb-8 text-center">Propiedades destacadas</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Propiedad 1 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition border border-gray-100">
                    <div class="h-48 bg-gray-200 flex items-center justify-center text-gray-400 text-4xl">🏠</div>
                    <div class="p-6">
                        <div class="text-xs font-bold text-accent-600 uppercase tracking-wide mb-1">CASA · RIVADAVIA</div>
                        <h4 class="text-xl font-bold text-brand-900 mb-2">Casa 3 amb. con jardín</h4>
                        <p class="text-gray-600 text-sm mb-4">Rivadavia, San Juan</p>
                        <div class="text-2xl font-bold text-brand-800">USD 95.000</div>
                    </div>
                </div>
                <!-- Propiedad 2 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition border border-gray-100">
                    <div class="h-48 bg-gray-200 flex items-center justify-center text-gray-400 text-4xl">🌳</div>
                    <div class="p-6">
                        <div class="text-xs font-bold text-accent-600 uppercase tracking-wide mb-1">RURAL · POCITO</div>
                        <h4 class="text-xl font-bold text-brand-900 mb-2">Finca productiva con casco</h4>
                        <p class="text-gray-600 text-sm mb-4">Pocito, San Juan</p>
                        <div class="text-2xl font-bold text-brand-800">USD 180.000</div>
                    </div>
                </div>
                <!-- Propiedad 3 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition border border-gray-100">
                    <div class="h-48 bg-gray-200 flex items-center justify-center text-gray-400 text-4xl">🏭</div>
                    <div class="p-6">
                        <div class="text-xs font-bold text-accent-600 uppercase tracking-wide mb-1">INDUSTRIAL · RAWSON</div>
                        <h4 class="text-xl font-bold text-brand-900 mb-2">Nave y granja avícola</h4>
                        <p class="text-gray-600 text-sm mb-4">Rawson, San Juan</p>
                        <div class="text-2xl font-bold text-brand-800">USD 300.000</div>
                    </div>
                </div>
            </div>
            <p class="text-center text-sm text-gray-500 mt-8 italic">* Valores de ejemplo — el listado completo se conecta a la base de compraensanjuan.com.</p>
        </div>
    </section>

    <!-- Vender o Alquilar -->
    <section id="vender" class="py-20 bg-brand-800 text-white">
        <div class="max-w-4xl mx-auto px-4 text-center">
            <h3 class="text-3xl font-bold mb-4">Vender o alquilar</h3>
            <p class="text-xl text-brand-100 mb-10">Dos formas de publicar tu propiedad con la respaldo de un Martillero Público matriculado.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="https://wa.me/5492645448302?text=Hola!%20Quiero%20publicar%20mi%20propiedad" target="_blank" class="bg-white text-brand-900 hover:bg-gray-100 font-bold px-8 py-4 rounded-xl text-lg transition shadow-lg">
                    Publicar yo mismo →
                </a>
                <a href="https://wa.me/5492645448302?text=Hola!%20Quiero%20vender/alquilar%20con%20Unir%20Propiedades" target="_blank" class="bg-accent-500 hover:bg-accent-600 text-brand-900 font-bold px-8 py-4 rounded-xl text-lg transition shadow-lg shadow-accent-500/30">
                    Vender con Unir Propiedades →
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-brand-900 text-gray-400 py-12 border-t border-brand-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
                <div>
                    <h4 class="text-white text-lg font-bold mb-4">Unir Propiedades</h4>
                    <p class="text-sm mb-4">Martillero Público · MPCCCI · San Juan, Argentina</p>
                    <p class="text-sm">Compromiso, transparencia y profesionalismo en cada operación inmobiliaria.</p>
                </div>
                <div>
                    <h4 class="text-white text-lg font-bold mb-4">Enlaces</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="https://unirpropiedades.com.ar" target="_blank" class="hover:text-accent-400 transition">unirpropiedades.com.ar</a></li>
                        <li><a href="https://compraensanjuan.com" target="_blank" class="hover:text-accent-400 transition">compraensanjuan.com</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-white text-lg font-bold mb-4">Contacto</h4>
                    <a href="https://wa.me/5492645448302" target="_blank" class="inline-flex items-center gap-2 bg-whatsapp/20 text-whatsapp hover:bg-whatsapp/30 px-4 py-2 rounded-lg transition font-semibold">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                        +54 9 264 544-8302
                    </a>
                </div>
            </div>
            <div class="border-t border-brand-800 pt-8 text-center text-sm">
                &copy; 2026 Unir Propiedades. Todos los derechos reservados.
            </div>
        </div>
    </footer>

    <!-- Script de Funcionalidad del Tasador -->
    <script>
        document.getElementById('tasadorForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Obtener valores del formulario
            const formData = new FormData(e.target);
            const tipo = formData.get('tipo');
            const m2cubiertos = parseFloat(formData.get('m2cubiertos')) || 0;
            const m2terreno = parseFloat(formData.get('m2terreno')) || 0;
            const estado = formData.get('estado');
            const dolar = parseFloat(formData.get('dolar')) || 1000;
            const whatsapp = formData.get('whatsapp');
            const zona = formData.get('zona');
            
            // Lógica de estimación orientativa (simplificada para demo)
            let valorBaseM2 = 800; // USD base por m2 cubierto
            if (tipo === 'Departamento') valorBaseM2 = 1000;
            if (tipo === 'Terreno') valorBaseM2 = 150; // por m2 terreno
            if (tipo === 'Rural') valorBaseM2 = 2000; // valor base finca
            if (tipo === 'Industrial') valorBaseM2 = 600;

            let estimacionUSD = (m2cubiertos * valorBaseM2) + (m2terreno * (valorBaseM2 * 0.2));
            
            // Ajuste por estado
            if (estado === 'A estrenar') estimacionUSD *= 1.15;
            if (estado === 'Bueno') estimacionUSD *= 0.9;
            if (estado === 'A refaccionar') estimacionUSD *= 0.7;

            // Ajuste por factores (simplificado: +5% por cada suma, -5% por cada resta)
            const factoresSuma = formData.getAll('suma').length;
            const factoresResta = formData.getAll('resta').length;
            estimacionUSD = estimacionUSD * (1 + (factoresSuma * 0.05) - (factoresResta * 0.05));

            // Redondear y formatear
            estimacionUSD = Math.round(estimacionUSD);
            const estimacionARS = estimacionUSD * dolar;
            
            // Rango de estimación (+/- 10%)
            const minUSD = Math.round(estimacionUSD * 0.9);
            const maxUSD = Math.round(estimacionUSD * 1.1);
            const minARS = Math.round(estimacionARS * 0.9);
            const maxARS = Math.round(estimacionARS * 1.1);

            // Mostrar resultados
            document.getElementById('resultadoUSD').textContent = `USD ${minUSD.toLocaleString()} – USD ${maxUSD.toLocaleString()}`;
            document.getElementById('resultadoARS').textContent = `≈ $${minARS.toLocaleString()} – $${maxARS.toLocaleString()} ARS`;
            
            document.getElementById('resultado').classList.remove('hidden');
            document.getElementById('resultado').scrollIntoView({ behavior: 'smooth', block: 'center' });

            // Generar mensaje de WhatsApp
            const factoresSumaText = formData.getAll('suma').join(', ') || 'Ninguno';
            const factoresRestaText = formData.getAll('resta').join(', ') || 'Ninguno';
            
            const mensajeWA = `Hola! Quiero una tasación certificada. Datos de mi propiedad:%0A` +
                `- Zona: ${zona}%0A` +
                `- Tipo: ${tipo}%0A` +
                `- M² Cubiertos: ${m2cubiertos} | M² Terreno: ${m2terreno}%0A` +
                `- Estado: ${estado}%0A` +
                `- Factores +: ${factoresSumaText}%0A` +
                `- Factores -: ${factoresRestaText}%0A` +
                `- Mi WhatsApp: ${whatsapp}%0A` +
                `Espero su contacto para coordinar la visita del martillero.`;
            
            document.getElementById('btnWhatsApp').href = `https://wa.me/5492645448302?text=${mensajeWA}`;
        });
    </script>
</body>
</html>