.elementor-3625 .elementor-element.elementor-element-db593c9{--display:flex;}.elementor-3625 .elementor-element.elementor-element-512e9f8{width:100%;max-width:100%;}.elementor-3625 .elementor-element.elementor-element-512e9f8 > .elementor-widget-container{margin:0% -10% 0% -10%;padding:0px 0px 0px 0px;}.elementor-3625 .elementor-element.elementor-element-512e9f8.elementor-element{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for html, class: .elementor-element-512e9f8 */<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Planejamento de Consórcio</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #0f4c3a;
            /* Dark Green from logo */
            --accent: #f26522;
            /* Orange Action Color */
            --bg-body: #f8f9fa;
            --bg-card: #ffffff;
            --text-main: #1f2937;
            --text-light: #6b7280;
            --border: #e5e7eb;
            --success: #10b981;
            --radius: 12px;
            --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);
            --shadow-card: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-font-smoothing: antialiased;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-main);
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* HEADER */
        header {
            background: white;
            padding: 0.5rem 1.5rem;
            /* Reduzido de 1rem 2rem */
            border-bottom: 3px solid var(--accent);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
            /* Aumentado para garantir que fique sempre no topo */
            box-shadow: var(--shadow-sm);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--primary);
        }

        .brand-icon {
            background-color: var(--primary);
            color: white;
            /* Logo 'R' box */
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-family: serif;
            font-weight: 700;
        }

        .brand-text span {
            color: var(--accent);
        }

        .step-indicator {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #9ca3af;
            background: #fff;
            padding: 4px 12px;
            border-radius: 20px;
            border: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .step-indicator::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: var(--accent);
            border-radius: 50%;
        }

        /* MAIN CONTAINER */
        main {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            /* Mudado de center para flex-start para evitar esconder o topo do card */
            padding: 1.5rem 1rem;
            /* Reduzido o padding vertical */
            overflow-y: auto;
        }

        /* CARD CONTAINER that holds the tool content */
        .app-container {
            background: var(--bg-card);
            width: 100%;
            max-width: 900px;
            min-height: 550px;
            border-radius: 20px;
            box-shadow: var(--shadow-card);
            padding: 2.5rem;
            /* Ajuste leve no padding interno */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: all 0.3s ease;
            margin: 1rem 0;
            /* Margem para não colar no header ou footer */
        }

        /* UTILITIES */
        .hidden {
            display: none !important;
        }

        .text-center {
            text-align: center;
        }

        .w-full {
            width: 100%;
        }

        .flex-col {
            display: flex;
            flex-direction: column;
        }

        .items-center {
            align-items: center;
        }

        .justify-center {
            justify-content: center;
        }

        h1 {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #111827;
        }

        h2 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #1f2937;
        }

        p.subtitle {
            color: #6b7280;
            margin-bottom: 2rem;
            max-width: 500px;
            line-height: 1.5;
        }

        .btn {
            background-color: var(--accent);
            /* Orange by default now based on screenshot */
            color: white;
            border: none;
            padding: 0.875rem 2rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, background-color 0.2s;
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: 0 4px 12px rgba(242, 101, 34, 0.2);
        }

        .btn:hover {
            background-color: #d35400;
            transform: translateY(-1px);
        }

        .btn-outline {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-main);
            box-shadow: none;
        }

        .btn-outline:hover {
            background: var(--bg-body);
            transform: translateY(-1px);
        }

        .btn-green {
            background-color: var(--primary);
            color: white;
            box-shadow: 0 4px 12px rgba(15, 76, 58, 0.2);
        }

        .btn-green:hover {
            background-color: #0c3b2e;
        }

        /* FORMS */
        .form-group {
            margin-bottom: 1.25rem;
            text-align: left;
        }

        .form-label {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0.5rem;
        }

        .form-input {
            width: 100%;
            padding: 0.875rem 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 1rem;
            color: #1f2937;
            background-color: #fff;
            transition: border-color 0.2s;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.1);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

        /* SLIDER COMPONENT */
        .slider-container {
            background: #fffafa;
            border: 1px solid #fed7aa;
            /* Light orange border */
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .slider-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .tag-percentage {
            background: #d1fae5;
            color: #059669;
            font-weight: 700;
            font-size: 0.75rem;
            padding: 4px 10px;
            border-radius: 20px;
        }

        /* Range Slider Styling */
        input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            background: transparent;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: #3b82f6;
            /* Blue thumb from screenshot */
            cursor: pointer;
            margin-top: -8px;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 4px;
            cursor: pointer;
            background: #e5e7eb;
            border-radius: 2px;
        }

        input[type=range]:focus::-webkit-slider-runnable-track {
            background: #d1d5db;
        }

        /* Custom track fill using JS usually, simplified here */


        /* STEP 1: WELCOME */
        .welcome-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
            width: 100%;
        }

        .welcome-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: default;
            box-shadow: var(--shadow-sm);
        }

        .welcome-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
        }

        .welcome-icon-box {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem auto;
            font-size: 1.5rem;
        }

        .icon-profile {
            background: #f3e8ff;
            color: #7e22ce;
        }

        .icon-home {
            background: #ffe4e6;
            color: #be123c;
        }

        .icon-chart {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .logo-center {
            background: #fff;
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem auto;
            color: var(--accent);
            border: 1px solid #fed7aa;
            font-size: 1.5rem;
        }

        /* STEP 4: PORTFOLIO */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            width: 100%;
            margin-top: 1rem;
        }

        .btn-location-card {
            height: 120px;
            border-radius: 12px;
            border: none;
            background-size: cover;
            background-position: center;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .btn-location-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .btn-location-card span {
            color: white;
            z-index: 2;
            font-weight: 700;
            font-size: 1.1rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            letter-spacing: 0.5px;
        }

        .property-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border);
            transition: all 0.3s;
        }

        .property-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .property-img {
            height: 180px;
            background-color: #e5e7eb;
            position: relative;
            background-size: cover;
            background-position: center;
        }

        .tag {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--primary);
            color: white;
            font-size: 0.7rem;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .property-content {
            padding: 1.5rem;
        }

        .property-title {
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
        }

        .property-details {
            font-size: 0.8rem;
            color: var(--text-light);
            margin-bottom: 1rem;
        }

        .property-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;
            border-top: 1px solid #f3f4f6;
            padding-top: 1rem;
        }

        .price-label {
            font-size: 0.7rem;
            color: #9ca3af;
            text-transform: uppercase;
        }

        .price-value {
            font-weight: 700;
            font-size: 1.2rem;
            color: var(--primary);
        }

        /* STEP 5: STRATEGY */
        .strategy-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            width: 100%;
            max-width: 650px;
            margin: 0 auto;
        }

        .strategy-option {
            display: flex;
            align-items: center;
            border: 1px solid var(--border);
            padding: 1.5rem;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }

        .strategy-option:hover,
        .strategy-option.selected {
            border-color: var(--primary);
            background-color: #f0fdf9;
        }

        .strategy-icon {
            width: 48px;
            height: 48px;
            background: #f3f4f6;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-right: 1.5rem;
            flex-shrink: 0;
        }

        .strategy-text {
            flex: 1;
        }

        .st-title {
            font-weight: 700;
            color: #111827;
        }

        .st-subtitle {
            font-size: 0.75rem;
            color: var(--accent);
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 0.25rem;
            display: block;
        }

        .st-desc {
            font-size: 0.85rem;
            color: #6b7280;
            line-height: 1.4;
        }

        .radio-circle {
            width: 20px;
            height: 20px;
            border: 2px solid #d1d5db;
            border-radius: 50%;
            margin-left: 1rem;
            position: relative;
        }

        .strategy-option.selected .radio-circle {
            border-color: var(--primary);
        }

        .strategy-option.selected .radio-circle::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: var(--primary);
            border-radius: 50%;
        }

        /* ACTIONS FOOTER */
        .step-footer {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 2rem;
            padding-top: 1rem;
        }

        /* STEP 6: FINANCIAL VIABILITY */
        .viability-container {
            width: 100%;
        }

        .cards-compare {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
            /* Aumentado de 2rem para 3rem */
            margin-bottom: 3.5rem;
        }

        .compare-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2.5rem;
            /* Aumentado de 2rem para 2.5rem */
            text-align: center;
            position: relative;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 400px;
        }

        .card-primary {
            background: var(--primary);
            color: white;
            border: none;
            box-shadow: 0 10px 30px -5px rgba(15, 76, 58, 0.4);
            transform: scale(1.05);
            z-index: 10;
        }

        .card-primary .price-value {
            color: white;
        }

        .card-primary .label-sm {
            color: rgba(255, 255, 255, 0.7);
        }

        .card-primary .total-cost {
            color: white;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        .badge-best {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--accent);
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
        }

        .compare-title {
            font-size: 0.9rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }

        .compare-sub {
            font-size: 0.75rem;
            margin-bottom: 1.5rem;
            opacity: 0.8;
        }

        .main-value {
            font-size: 1.75rem;
            font-weight: 700;
            margin: 0.5rem 0;
        }

        .label-sm {
            font-size: 0.7rem;
            color: #9ca3af;
            text-transform: uppercase;
        }

        .total-cost {
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 1px solid #f3f4f6;
            font-weight: 700;
            font-size: 1.1rem;
        }

        .total-cost span {
            display: block;
            font-size: 0.7rem;
            font-weight: 400;
            opacity: 0.7;
            margin-bottom: 2px;
        }

        .viability-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
            margin-top: 1rem;
            background: #fafafa;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #f3f4f6;
        }

        .viability-table th {
            text-align: left;
            padding: 1rem;
            color: #9ca3af;
            font-weight: 600;
            font-size: 0.7rem;
            text-transform: uppercase;
        }

        .viability-table td {
            padding: 1rem;
            border-top: 1px solid #e5e7eb;
            color: #4b5563;
            font-weight: 500;
        }

        .viability-table tr:first-child td {
            color: var(--primary);
            font-weight: 700;
            background: #f0fdf9;
        }

        .viability-table .negative {
            color: #dc2626;
        }

        /* ANIMATIONS */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeIn 0.4s ease-out forwards;
        }
    </style>
</head>

<body>

    <!-- HEADER -->
    <header>
        <div class="brand">
            <div class="brand-text" style="display:flex; flex-direction:column; line-height:1.1; font-size: 0.9rem;">
                <!-- Updated Brand to match screenshot more closely -->
                <div style="font-weight:800; color: var(--primary);">Planejamento de Consórcio</div>
                <div style="font-size:0.7rem; color:#6b7280; font-weight:500;">Consórcio Assistant SP</div>
            </div>
        </div>
        <div class="step-indicator" id="step-indicator">Etapa 1 de 7</div>
    </header>

    <!-- MAIN CONTENT -->
    <main>
        <div class="app-container fade-in" id="main-card">

            <!-- VIEW 1: WELCOME -->
            <div id="view-home" class="w-full flex-col items-center justify-center text-center">
                <div class="logo-center">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                    </svg>
                </div>
                <h1 style="color: #374151;">Planejamento de <span style="color:var(--accent)">Consórcio</span></h1>
                <p class="subtitle" style="margin-left: auto; margin-right: auto;">Bem-vindo ao assistente inteligente.
                    Vamos montar o melhor cenário para
                    o seu investimento.</p>

                <div class="welcome-grid">
                    <div class="welcome-card">
                        <div class="welcome-icon-box icon-profile">👤</div>
                        <h3>Perfil</h3>
                        <p class="text-light text-sm mt-2">Análise financeira e capacidade de pagamento.</p>
                    </div>
                    <div class="welcome-card">
                        <div class="welcome-icon-box icon-home">🏢</div>
                        <h3>Imóvel</h3>
                        <p class="text-light text-sm mt-2">Avaliação de mercado e seleção de opções.</p>
                    </div>
                    <div class="welcome-card">
                        <div class="welcome-icon-box icon-chart">📈</div>
                        <h3>Estratégia</h3>
                        <p class="text-light text-sm mt-2">Cenários otimizados e comparação de longo prazo.</p>
                    </div>
                </div>

                <div class="text-center">
                    <button class="btn" onclick="navigateTo('view-profile', 'Etapa 2 de 7')">
                        Iniciar Consultoria <span>→</span>
                    </button>
                    <div style="margin-top:1rem; font-size:0.75rem; color:#9ca3af;">© 2026 — Simulador inteligente em
                        HTML puro</div>
                </div>
            </div>

            <!-- VIEW 2: PROFILE (Step 2) -->
            <div id="view-profile" class="hidden w-full">
                <div class="text-center mb-8">
                    <h1>Perfil do Investidor</h1>
                    <p class="text-light">Dados para cálculo de taxas e capacidade de pagamento.</p>
                </div>

                <div class="w-full" style="max-width: 700px; margin: 0 auto;">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Nome Completo</label>
                            <input type="text" class="form-input" placeholder="Ex: Cliente Preferencial">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Planejamento de Uso</label>
                            <select class="form-input" style="appearance:auto;">
                                <option>Selecione...</option>
                                <option>Imóvel</option>
                                <option>Carro</option>
                                <option>Moto</option>
                                <option>Serviços</option>
                            </select>
                            <div style="font-size:0.7rem; color:#9ca3af; margin-top:4px;">Ajuda a ajustar prazo e
                                estratégia.</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Renda Mensal Familiar</label>
                        <input type="text" id="input-income" class="form-input" placeholder="R$ 0,00"
                            oninput="formatCurrencyInput(event)">
                        <div style="font-size:0.7rem; color:#9ca3af; margin-top:4px;">Usamos isso para sugerir um teto
                            de parcela saudável.</div>
                    </div>

                    <div class="slider-container">
                        <div class="slider-header">
                            <div>
                                <label class="form-label" style="margin:0;">Teto de Parcela Mensal</label>
                                <div style="font-size:0.7rem; color:#6b7280;">Defina o % máximo da renda para
                                    compromisso mensal.</div>
                            </div>
                            <span class="tag-percentage" id="slider-label-val">30% da Renda</span>
                        </div>
                        <div
                            style="position:relative; height:4px; background:#e5e7eb; border-radius:2px; margin-top:1rem; margin-bottom:1rem;">
                            <div id="slider-track-fill"
                                style="position:absolute; left:0; width:30%; height:100%; background:#3b82f6; border-radius:2px;">
                            </div>
                            <input type="range" id="input-slider-percent" min="5" max="50" value="30"
                                style="position:absolute; top:-8px; width:100%; margin:0;"
                                oninput="updateSlider(this.value)">
                        </div>
                        <div style="font-size:0.85rem; color:#4b5563;">• Sugestão (<span
                                id="text-percent-display">30</span>% da renda): <strong id="val-30-percent">R$
                                0,00</strong></div>
                    </div>

                    <!-- Resources section removed as per user request -->

                    <div class="step-footer">
                        <button class="btn active btn-outline"
                            onclick="navigateTo('view-home', 'Etapa 1 de 7')">Voltar</button>
                        <button class="btn" onclick="navigateTo('view-location', 'Etapa 3 de 7')">Continuar para Região
                            <span>→</span></button>
                    </div>
                </div>
            </div>

            <!-- VIEW 3: LOCATION (Step 3) -->
            <div id="view-location" class="hidden w-full">
                <div class="text-center mb-8">
                    <h1>Escolha a Região</h1>
                    <p class="text-light">Selecione a capital onde deseja investir.</p>
                </div>

                <div
                    style="display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:1.2rem; margin-bottom: 2rem;">

                    <!-- SÃO PAULO -->
                    <button class="btn-location-card" onclick="selectLocation('SP')"
                        style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9tKPFXM-BWFsmle4WTsti7yVgIDinqkMEAg&s');">
                        <span>São Paulo</span>
                    </button>

                    <!-- RIO DE JANEIRO -->
                    <button class="btn-location-card" onclick="selectLocation('RJ')"
                        style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1483729558449-99ef09a8c325?auto=format&fit=crop&w=300&q=80');">
                        <span>Rio de Janeiro</span>
                    </button>

                    <!-- BRASÍLIA -->
                    <button class="btn-location-card" onclick="selectLocation('DF')"
                        style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Planalto_Central_%28cropped%29.jpg/1280px-Planalto_Central_%28cropped%29.jpg');">
                        <span>Brasília</span>
                    </button>

                    <!-- BELO HORIZONTE -->
                    <button class="btn-location-card" onclick="selectLocation('MG')"
                        style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://as1.ftcdn.net/jpg/05/64/03/34/1000_F_564033423_cQaeD5cypYd5sNQOacJdTmq1yredcv9R.jpg');">
                        <span>Belo Horizonte</span>
                    </button>

                    <!-- RECIFE -->
                    <button class="btn-location-card" onclick="selectLocation('PE')"
                        style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://as2.ftcdn.net/v2/jpg/03/95/56/43/1000_F_395564307_SZxYt7reJegKxmkvte2VOP03FeJ2AH3T.jpg');">
                        <span>Recife</span>
                    </button>

                    <!-- SALVADOR -->
                    <button class="btn-location-card" onclick="selectLocation('BA')"
                        style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://as2.ftcdn.net/v2/jpg/04/74/36/61/1000_F_474366163_xOGLptzLA253QZiUnbcb2sxVLZ5mPJSj.jpg');">
                        <span>Salvador</span>
                    </button>

                    <!-- CURITIBA -->
                    <button class="btn-location-card" onclick="selectLocation('PR')"
                        style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://as1.ftcdn.net/v2/jpg/05/21/65/70/1000_F_521657095_cnHLVpuP7gdU1oNrznaemhy4VHoQcGM9.jpg');">
                        <span>Curitiba</span>
                    </button>

                    <!-- PORTO ALEGRE -->
                    <button class="btn-location-card" onclick="selectLocation('RS')"
                        style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('https://as2.ftcdn.net/jpg/04/54/21/71/1000_F_454217171_xjACqjrvmjOMcKwkac5ZPDnL493JC6gN.jpg');">
                        <span>Porto Alegre</span>
                    </button>
                </div>

                <div class="step-footer">
                    <button class="btn active btn-outline"
                        onclick="navigateTo('view-profile', 'Etapa 2 de 7')">Voltar</button>
                </div>
            </div>

            <!-- VIEW 4: PORTFOLIO (Existing) -->
            <div id="view-portfolio" class="hidden w-full">
                <div class="flex justify-between items-end mb-4">
                    <div>
                        <h1 id="portfolio-title">Portfólio: Seleção</h1>
                        <p class="text-light">Selecione o imóvel base ou insira um valor manualmente.</p>
                    </div>
                    <button class="btn-outline" style="padding: 0.5rem 1rem; font-size: 0.8rem; border-radius: 6px;"
                        onclick="navigateTo('view-location', 'Etapa 3 de 7')">←
                        Trocar Região</button>
                </div>

                <!-- CAMPO MANUAL -->
                <div
                    style="background: #fffafa; border: 1px dashed var(--accent); border-radius: 12px; padding: 1.2rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; border-color: #fed7aa;">
                    <div
                        style="font-size: 1.2rem; background: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);">
                        🎯</div>
                    <div style="flex: 1;">
                        <h4 style="margin: 0; font-size: 0.9rem; color: var(--primary);">Não encontrou o valor ideal?
                        </h4>
                        <p style="font-size: 0.75rem; color: #6b7280; margin: 0;">Simule com o valor exato que você
                            deseja.</p>
                    </div>
                    <div style="display: flex; gap: 0.5rem; align-items: center;">
                        <input type="text" id="manual-property-value" class="form-input" placeholder="R$ 0,00"
                            oninput="formatCurrencyInput(event)"
                            style="max-width: 180px; padding: 0.6rem 0.8rem; font-size: 0.9rem;">
                        <button class="btn" style="padding: 0.6rem 1.2rem; font-size: 0.85rem;"
                            onclick="useManualValue()">Simular Manual</button>
                    </div>
                </div>

                <div class="portfolio-grid" id="portfolio-list">
                    <!-- Dynamic Content will be loaded here -->
                </div>
            </div>

            <!-- VIEW 4: STRATEGY (Step 5) -->
            <div id="view-strategy" class="hidden w-full">
                <div class="text-center mb-6">
                    <h1>Definição de Estratégia</h1>
                    <p class="text-light">Qual o principal objetivo do cliente neste momento?</p>
                </div>

                <div class="strategy-list">
                    <div class="strategy-option" onclick="selectStrategy(this)">
                        <div class="strategy-icon">📉</div>
                        <div class="strategy-text">
                            <span class="st-subtitle" style="color: #c0392b;">Fluxo Suave</span>
                            <div class="st-title">Foco na Menor Parcela</div>
                            <div class="st-desc">Prioriza o fluxo de caixa mensal, diluindo o investimento no maior
                                prazo possível.</div>
                        </div>
                        <div class="radio-circle"></div>
                    </div>

                    <div class="strategy-option selected" onclick="selectStrategy(this)">
                        <div class="strategy-icon">🚀</div>
                        <div class="strategy-text">
                            <span class="st-subtitle">Aceleração</span>
                            <div class="st-title">Foco na Contemplação</div>
                            <div class="st-desc">Estratégia agressiva de lances para antecipar a posse do imóvel.</div>
                        </div>
                        <div class="radio-circle"></div>
                    </div>

                    <div class="strategy-option" onclick="selectStrategy(this)">
                        <div class="strategy-icon">⚖️</div>
                        <div class="strategy-text">
                            <span class="st-subtitle">Equilíbrio</span>
                            <div class="st-title">Custo x Benefício</div>
                            <div class="st-desc">Balanceamento ideal entre valor de parcela e probabilidade de
                                contemplação.</div>
                        </div>
                        <div class="radio-circle"></div>
                    </div>
                </div>

                <div class="step-footer">
                    <button class="btn btn-outline"
                        onclick="navigateTo('view-portfolio', 'Etapa 4 de 7')">Voltar</button>
                    <button class="btn"
                        style="background-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; box-shadow:none;"
                        id="btn-process" disabled>Simular Lances <span>→</span></button>
                </div>
            </div>

            <!-- VIEW 6: BIDS (Step 6) -->
            <div id="view-bids" class="hidden w-full">
                <div class="text-center mb-6">
                    <h1>Definição de Lances</h1>
                    <p class="text-light">Simule a oferta de lance para antecipar sua contemplação.</p>
                </div>

                <div class="w-full" style="max-width: 600px; margin: 0 auto;">
                    <!-- Embedded Bid -->
                    <div
                        style="background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h3 style="margin-bottom: 0.5rem; display:flex; align-items:center; gap:0.5rem;">
                            <span>✂️</span> Lance Embutido
                        </h3>
                        <p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 1rem;">
                            Utilize parte da carta de crédito como lance. Isso reduz o valor líquido recebido, mas não
                            exige desembolso imediato.
                        </p>
                        <div class="form-group">
                            <label class="form-label">Percentual do Crédito</label>
                            <select class="form-input" id="input-bid-embedded">
                                <option value="0">Não usar lance embutido</option>
                                <option value="10">10% da carta</option>
                                <option value="20">20% da carta</option>
                                <option value="25">25% da carta</option>
                                <option value="30">30% da carta</option>
                                <option value="40">40% da carta</option>
                                <option value="50">50% da carta</option>
                            </select>
                        </div>
                    </div>

                    <!-- CONFIGURAÇÃO DE TAXAS (ETAPA 6) - Oculto por solicitação -->
                    <div
                        style="display: none; background: #f0fdf9; border: 1px solid #10b981; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h3
                            style="margin-bottom: 1rem; display:flex; align-items:center; gap:0.5rem; color: var(--primary);">
                            <span>⚙️</span> Taxas de Referência para o Cálculo
                        </h3>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">Taxa Adm. Total (%)</label>
                                <input type="number" id="cfg-taxa-adm" class="form-input" value="21" step="0.5">
                                <div style="font-size:0.7rem; color:#6b7280; margin-top:4px;">Custo total do consórcio.
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Juros Banco Caixa (% a.a.)</label>
                                <input type="number" id="cfg-taxa-caixa" class="form-input" value="11" step="0.1">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Juros Bancos Privados (% a.a.)</label>
                            <input type="number" id="cfg-taxa-privado" class="form-input" value="14" step="0.1">
                        </div>
                    </div>

                    <!-- Fixed Bid -->
                    <div
                        style="background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem;">
                        <h3 style="margin-bottom: 0.5rem; display:flex; align-items:center; gap:0.5rem;">
                            <span>💰</span> Lance Livre (Recurso Próprio)
                        </h3>
                        <p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 1rem;">
                            Oferta em dinheiro para aumentar suas chances. Só é pago se você for contemplado.
                        </p>
                        <div class="form-group">
                            <label class="form-label">Valor do Lance</label>
                            <input type="text" id="input-bid-fixed" class="form-input" placeholder="R$ 0,00"
                                oninput="formatCurrencyInput(event)">
                        </div>
                    </div>

                    <div class="step-footer">
                        <button class="btn btn-outline"
                            onclick="navigateTo('view-strategy', 'Etapa 5 de 7')">Voltar</button>
                        <button class="btn" onclick="navigateTo('view-results', 'Etapa 7 de 7')">Ver Simulação Final
                            <span>→</span></button>
                    </div>
                </div>
            </div>

            <!-- VIEW 7: FINANCIAL VIABILITY (Step 7) -->
            <div id="view-results" class="hidden w-full">
                <div class="text-center mb-6">
                    <h1>Estudo de Viabilidade Financeira</h1>
                    <p class="text-light"><span id="res-val-label">Valor da Carta:</span> <strong id="res-val-market">R$
                            0,00</strong> • Comparativo de Longo Prazo</p>
                    <div id="res-carta-bruta-info" style="font-size: 0.75rem; color: #6b7280; margin-top: 5px;"></div>
                </div>

                <div class="cards-compare">
                    <!-- Consortium -->
                    <div class="compare-card card-primary">
                        <div class="badge-best">Melhor Opção Financeira</div>
                        <div class="compare-title">Consórcio</div>
                        <div class="compare-sub" style="color: rgba(255,255,255,0.8);">Referência Capital</div>

                        <div class="label-sm">Parcela Mensal</div>
                        <div class="main-value" id="res-cons-monthly">R$ 4.333,33</div>
                        <div class="label-sm" style="margin-bottom: 1rem;">em 180 meses</div>

                        <div class="total-cost">
                            <span>Custo Total Final (Bolso)</span>
                            <div id="res-cons-total">R$ 780.000,00</div>
                        </div>
                        <div id="res-cons-breakdown"></div>
                        <div class="label-sm"
                            style="margin-top: 0.5rem; text-transform: none; color: #6ee7b7; display:none;">*Taxa Adm
                            total diluída. Sem juros bancários.</div>
                    </div>

                    <!-- CAIXA -->
                    <div class="compare-card">
                        <div class="compare-title">Caixa Econômica</div>
                        <div class="compare-sub">Taxa ref. 11% a.a.</div>

                        <div class="label-sm">1ª Parcela (Estimada)</div>
                        <div class="main-value" style="color: #4b5563;" id="res-caixa-monthly">R$ 3.445,36</div>
                        <div class="label-sm" style="margin-bottom: 1rem; color: #ef4444;">em 360 meses (30 anos)</div>

                        <div class="total-cost" style="color: #4b5563;">
                            <span>Custo Total Final</span>
                            <div id="res-caixa-total">R$ 1.240.329,16</div>
                        </div>
                        <div class="label-sm" style="margin-top: 0.5rem; text-transform: none; color: #ef4444;"
                            id="res-caixa-interest">Paga +R$ 460k em juros</div>
                    </div>

                    <!-- PRIVADOS -->
                    <div class="compare-card">
                        <div class="compare-title">Itaú / Bradesco</div>
                        <div class="compare-sub">Taxa ref. 14% a.a.</div>

                        <div class="label-sm">1ª Parcela (Estimada)</div>
                        <div class="main-value" style="color: #4b5563;" id="res-bank-monthly">R$ 5.716,80</div>
                        <div class="label-sm" style="margin-bottom: 1rem; color: #ef4444;">em 360 meses (30 anos)</div>

                        <div class="total-cost" style="color: #4b5563;">
                            <span>Custo Total Final</span>
                            <div id="res-bank-total">R$ 2.058.047,09</div>
                        </div>
                        <div class="label-sm" style="margin-top: 0.5rem; text-transform: none; color: #ef4444;"
                            id="res-bank-interest">Paga +R$ 1.2mi em juros</div>
                    </div>
                </div>

                <div style="border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; background: white;">
                    <div class="flex items-center gap-2 mb-4">
                        <span style="color: var(--accent); font-size: 1.2rem;">🕒</span>
                        <h3 style="margin:0; font-size: 1rem;">Para onde vai o seu dinheiro? (Acumulado Pago)</h3>
                    </div>

                    <table class="viability-table">
                        <thead>
                            <tr>
                                <th>Modalidade</th>
                                <th style="text-align: right;">Em 5 Anos</th>
                                <th style="text-align: right;">Em 10 Anos</th>
                                <th style="text-align: right;">Final do Contrato</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>● Consórcio</td>
                                <td style="text-align: right;" id="res-table-cons-5">R$ 260.000,00</td>
                                <td style="text-align: right;" id="res-table-cons-10">R$ 520.000,00</td>
                                <td style="text-align: right;" id="res-table-cons-final">R$ 780.000,00</td>
                            </tr>
                            <tr>
                                <td>Financ. Caixa (5%)</td>
                                <td style="text-align: right;" id="res-table-caixa-5">R$ 206.721,53</td>
                                <td style="text-align: right;" id="res-table-caixa-10">R$ 413.443,05</td>
                                <td style="text-align: right;" class="negative" id="res-table-caixa-final">R$
                                    1.240.329,16</td>
                            </tr>
                            <tr>
                                <td>Bancos Privados (10.5%)</td>
                                <td style="text-align: right;" id="res-table-bank-5">R$ 343.007,85</td>
                                <td style="text-align: right;" id="res-table-bank-10">R$ 686.015,70</td>
                                <td style="text-align: right;" class="negative" id="res-table-bank-final">R$
                                    2.058.047,09</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="step-footer">
                    <button class="btn btn-outline" onclick="navigateTo('view-bids', 'Etapa 6 de 7')">Voltar</button>
                    <button class="btn" onclick="alert('Proposta Gerada com Sucesso!')">Gerar Proposta Final ✓</button>
                </div>
            </div>

        </div>
    </main>

    <script>
        let currentPropertyValue = 650000;
        let selectedCity = "";

        // Simple View Router
        function navigateTo(viewId, stepText) {
            // Hide all views
            const views = ['view-home', 'view-profile', 'view-location', 'view-portfolio', 'view-strategy', 'view-bids', 'view-results'];
            views.forEach(v => {
                const el = document.getElementById(v);
                if (el) {
                    el.classList.add('hidden');
                    el.classList.remove('fade-in'); // Reset animation
                }
            });

            // Show target view
            const target = document.getElementById(viewId);
            if (target) {
                target.classList.remove('hidden');
                // Trigger reflow to restart animation
                void target.offsetWidth;
                target.classList.add('fade-in');
            }

            // Update Header Step
            const ind = document.getElementById('step-indicator');
            if (ind) ind.innerText = stepText.toUpperCase();

            // Adjust main container alignment if needed
            const mainCard = document.getElementById('main-card');
            if (viewId === 'view-results') {
                mainCard.style.maxWidth = '1000px';
                renderResults(); // Update calculations on view load
            } else {
                mainCard.style.maxWidth = '900px';
            }
        }

        // Logic
        function selectProperty(value) {
            currentPropertyValue = value;
            navigateTo('view-strategy', 'Etapa 5 de 7');
        }

        function useManualValue() {
            const input = document.getElementById('manual-property-value').value;
            let valStr = input.replace(/\D/g, "");
            if (valStr === "" || valStr === "0") {
                alert("Por favor, insira um valor válido.");
                return;
            }
            const valNum = Number(valStr) / 100;
            selectProperty(valNum);
        }

        function selectStrategy(element) {
            // Remove selected class from all options
            document.querySelectorAll('.strategy-option').forEach(el => el.classList.remove('selected'));
            // Add to clicked
            element.classList.add('selected');

            // Enable Process Button
            const btn = document.getElementById('btn-process');
            btn.disabled = false;

            // Actually enable visually
            btn.style.backgroundColor = 'var(--accent)';
            btn.style.color = 'white';
            btn.style.cursor = 'pointer';
            btn.style.boxShadow = '0 4px 12px rgba(242, 101, 34, 0.2)';
            btn.onclick = function () { navigateTo('view-bids', 'Etapa 6 de 7'); };
        }

        function formatMoney(num) {
            return num.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
        }

        function formatCurrencyInput(event) {
            let value = event.target.value.replace(/\D/g, "");

            if (value === "") {
                event.target.value = "";
                return;
            }

            value = (Number(value) / 100).toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
            event.target.value = value;

            if (event.target.id === 'input-income') {
                calculateMaxParcel();
            }
        }

        function updateSlider(val) {
            // Update Text
            document.getElementById('slider-label-val').innerText = val + "% da Renda";
            document.getElementById('text-percent-display').innerText = val;

            // Update Visual Track
            document.getElementById('slider-track-fill').style.width = val + "%";

            // Update Calculation
            calculateMaxParcel();
        }

        function calculateMaxParcel() {
            const input = document.getElementById('input-income').value;
            let valStr = input.replace(/\D/g, "");
            if (valStr === "") valStr = "0";
            const valNum = Number(valStr) / 100;

            const sliderVal = document.getElementById('input-slider-percent').value;
            const percent = sliderVal / 100;

            const result = valNum * percent;

            document.getElementById('val-30-percent').innerText = result.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
        }

        // Neighborhood data for generating 10 properties per city
        const cityNeighborhoods = {
            'SP': ['Jardins', 'Moema', 'Pinheiros', 'Vila Madalena', 'Itaim Bibi', 'Perdizes', 'Vila Nova Conceição', 'Morumbi', 'Brooklin', 'Campo Belo'],
            'RJ': ['Leblon', 'Ipanema', 'Barra da Tijuca', 'Copacabana', 'Botafogo', 'Lagoa', 'Flamengo', 'Tijuca', 'Recreio', 'Laranjeiras'],
            'DF': ['Asa Sul', 'Asa Norte', 'Lago Sul', 'Lago Norte', 'Sudoeste', 'Noroeste', 'Águas Claras', 'Guará', 'Park Way', 'Cruzeiro'],
            'MG': ['Savassi', 'Lourdes', 'Belvedere', 'Sion', 'Vila da Serra', 'Anchieta', 'Funcionários', 'Santo Agostinho', 'Mangabeiras', 'Serra'],
            'PE': ['Boa Viagem', 'Pina', 'Casa Forte', 'Aflitos', 'Jaqueira', 'Graças', 'Espinheiro', 'Casa Amarela', 'Madalena', 'Torre'],
            'BA': ['Barra', 'Ondina', 'Horto Florestal', 'Graça', 'Vitória', 'Pituba', 'Itaigara', 'Caminho das Árvores', 'Rio Vermelho', 'Jaguaribe'],
            'PR': ['Batel', 'Ecoville', 'Água Verde', 'Bigorrilho', 'Cabral', 'Juvevê', 'Champagnat', 'Mercês', 'Seminário', 'Ahú'],
            'RS': ['Moinhos de Vento', 'Bela Vista', 'Três Figueiras', 'Petrópolis', 'Mont Serrat', 'Higienópolis', 'Rio Branco', 'Menino Deus', 'Auxiliadora', 'Chácara das Pedras']
        };

        const propertyTypes = ['Apartamento', 'Casa', 'Cobertura', 'Studio', 'Sobrado'];

        function generateProperties(cityCode) {
            const container = document.getElementById('portfolio-list');
            container.innerHTML = ""; // Clear existing

            const neighborhoods = cityNeighborhoods[cityCode] || cityNeighborhoods['SP'];
            const prices = [187000, 205000, 290000, 330000, 1000000];

            // GALERIA DE FOTOS POR ESTADO (Insira os links entre as aspas)
            const gallery = {
                'SP': [
                    'https://cf.bstatic.com/xdata/images/hotel/max1024x768/472217894.jpg?k=65451b951c8aa658f2bb7845e178ce1541187ffc509cc12421eafbceadaca442&o=', // Imóvel 187k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/e34f6e056aeb6649d58a37f21cb50ed2/apartamento-com-3-quartos-para-alugar-98m-no-campinas-sao-jose.webp?action=fit-in&dimension=870x707', // Imóvel 205k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/6f8c6a3c22dcaaa1dec56b2cdf53ae7c/apartamento-com-2-quartos-para-alugar-88m-no-brooklin-paulista-sao-paulo.webp?action=fit-in&dimension=870x707&seo=false', // Imóvel 290k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/c65441c384f65ea24b617e8bf273132f/sobrado-com-3-quartos-para-alugar-97m-no-jardim-claudia-pinhais.webp?action=fit-in&dimension=870x707', // Imóvel 330k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/871c543f14a50a67cab35d8e40fbdebb/sobrado-com-3-quartos-para-alugar-150m-no-centro-pinhais.webp?action=fit-in&dimension=870x707'  // Imóvel 1 Milhão
                ],
                'RJ': [
                    'https://www.quintoandar.com.br/img/1200x800/893260404-892.6848064647696FCO2217.jpg', // Imóvel 187k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/e34f6e056aeb6649d58a37f21cb50ed2/apartamento-com-3-quartos-para-alugar-98m-no-campinas-sao-jose.webp?action=fit-in&dimension=870x707', // Imóvel 205k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/6f8c6a3c22dcaaa1dec56b2cdf53ae7c/apartamento-com-2-quartos-para-alugar-88m-no-brooklin-paulista-sao-paulo.webp?action=fit-in&dimension=870x707&seo=false', // Imóvel 290k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/c65441c384f65ea24b617e8bf273132f/sobrado-com-3-quartos-para-alugar-97m-no-jardim-claudia-pinhais.webp?action=fit-in&dimension=870x707', // Imóvel 330k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/871c543f14a50a67cab35d8e40fbdebb/sobrado-com-3-quartos-para-alugar-150m-no-centro-pinhais.webp?action=fit-in&dimension=870x707'  // Imóvel 1 Milhão
                ],
                'DF': [
                    'https://www.quintoandar.com.br/img/1200x800/893260404-892.6848064647696FCO2217.jpg', // Imóvel 187k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/e34f6e056aeb6649d58a37f21cb50ed2/apartamento-com-3-quartos-para-alugar-98m-no-campinas-sao-jose.webp?action=fit-in&dimension=870x707', // Imóvel 205k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/6f8c6a3c22dcaaa1dec56b2cdf53ae7c/apartamento-com-2-quartos-para-alugar-88m-no-brooklin-paulista-sao-paulo.webp?action=fit-in&dimension=870x707&seo=false', // Imóvel 290k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/c65441c384f65ea24b617e8bf273132f/sobrado-com-3-quartos-para-alugar-97m-no-jardim-claudia-pinhais.webp?action=fit-in&dimension=870x707', // Imóvel 330k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/871c543f14a50a67cab35d8e40fbdebb/sobrado-com-3-quartos-para-alugar-150m-no-centro-pinhais.webp?action=fit-in&dimension=870x707'  // Imóvel 1 Milhão
                ],
                'MG': [
                    'https://www.quintoandar.com.br/img/1200x800/893260404-892.6848064647696FCO2217.jpg', // Imóvel 187k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/e34f6e056aeb6649d58a37f21cb50ed2/apartamento-com-3-quartos-para-alugar-98m-no-campinas-sao-jose.webp?action=fit-in&dimension=870x707', // Imóvel 205k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/6f8c6a3c22dcaaa1dec56b2cdf53ae7c/apartamento-com-2-quartos-para-alugar-88m-no-brooklin-paulista-sao-paulo.webp?action=fit-in&dimension=870x707&seo=false', // Imóvel 290k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/c65441c384f65ea24b617e8bf273132f/sobrado-com-3-quartos-para-alugar-97m-no-jardim-claudia-pinhais.webp?action=fit-in&dimension=870x707', // Imóvel 330k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/871c543f14a50a67cab35d8e40fbdebb/sobrado-com-3-quartos-para-alugar-150m-no-centro-pinhais.webp?action=fit-in&dimension=870x707'  // Imóvel 1 Milhão
                ],
                'PE': [
                    'https://www.quintoandar.com.br/img/1200x800/893260404-892.6848064647696FCO2217.jpg', // Imóvel 187k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/e34f6e056aeb6649d58a37f21cb50ed2/apartamento-com-3-quartos-para-alugar-98m-no-campinas-sao-jose.webp?action=fit-in&dimension=870x707', // Imóvel 205k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/6f8c6a3c22dcaaa1dec56b2cdf53ae7c/apartamento-com-2-quartos-para-alugar-88m-no-brooklin-paulista-sao-paulo.webp?action=fit-in&dimension=870x707&seo=false', // Imóvel 290k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/c65441c384f65ea24b617e8bf273132f/sobrado-com-3-quartos-para-alugar-97m-no-jardim-claudia-pinhais.webp?action=fit-in&dimension=870x707', // Imóvel 330k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/871c543f14a50a67cab35d8e40fbdebb/sobrado-com-3-quartos-para-alugar-150m-no-centro-pinhais.webp?action=fit-in&dimension=870x707'  // Imóvel 1 Milhão
                ],
                'BA': [
                    'https://www.quintoandar.com.br/img/1200x800/893260404-892.6848064647696FCO2217.jpg', // Imóvel 187k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/e34f6e056aeb6649d58a37f21cb50ed2/apartamento-com-3-quartos-para-alugar-98m-no-campinas-sao-jose.webp?action=fit-in&dimension=870x707', // Imóvel 205k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/6f8c6a3c22dcaaa1dec56b2cdf53ae7c/apartamento-com-2-quartos-para-alugar-88m-no-brooklin-paulista-sao-paulo.webp?action=fit-in&dimension=870x707&seo=false', // Imóvel 290k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/c65441c384f65ea24b617e8bf273132f/sobrado-com-3-quartos-para-alugar-97m-no-jardim-claudia-pinhais.webp?action=fit-in&dimension=870x707', // Imóvel 330k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/871c543f14a50a67cab35d8e40fbdebb/sobrado-com-3-quartos-para-alugar-150m-no-centro-pinhais.webp?action=fit-in&dimension=870x707'  // Imóvel 1 Milhão
                ],
                'PR': [
                    'https://www.quintoandar.com.br/img/1200x800/893260404-892.6848064647696FCO2217.jpg', // Imóvel 187k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/e34f6e056aeb6649d58a37f21cb50ed2/apartamento-com-3-quartos-para-alugar-98m-no-campinas-sao-jose.webp?action=fit-in&dimension=870x707', // Imóvel 205k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/6f8c6a3c22dcaaa1dec56b2cdf53ae7c/apartamento-com-2-quartos-para-alugar-88m-no-brooklin-paulista-sao-paulo.webp?action=fit-in&dimension=870x707&seo=false', // Imóvel 290k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/c65441c384f65ea24b617e8bf273132f/sobrado-com-3-quartos-para-alugar-97m-no-jardim-claudia-pinhais.webp?action=fit-in&dimension=870x707', // Imóvel 330k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/871c543f14a50a67cab35d8e40fbdebb/sobrado-com-3-quartos-para-alugar-150m-no-centro-pinhais.webp?action=fit-in&dimension=870x707'  // Imóvel 1 Milhão
                ],
                'RS': [
                    'https://www.quintoandar.com.br/img/1200x800/893260404-892.6848064647696FCO2217.jpg', // Imóvel 187k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/e34f6e056aeb6649d58a37f21cb50ed2/apartamento-com-3-quartos-para-alugar-98m-no-campinas-sao-jose.webp?action=fit-in&dimension=870x707', // Imóvel 205k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/6f8c6a3c22dcaaa1dec56b2cdf53ae7c/apartamento-com-2-quartos-para-alugar-88m-no-brooklin-paulista-sao-paulo.webp?action=fit-in&dimension=870x707&seo=false', // Imóvel 290k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/c65441c384f65ea24b617e8bf273132f/sobrado-com-3-quartos-para-alugar-97m-no-jardim-claudia-pinhais.webp?action=fit-in&dimension=870x707', // Imóvel 330k
                    'https://resizedimgs.zapimoveis.com.br/img/vr-listing/871c543f14a50a67cab35d8e40fbdebb/sobrado-com-3-quartos-para-alugar-150m-no-centro-pinhais.webp?action=fit-in&dimension=870x707'  // Imóvel 1 Milhão
                ]
            };

            // Pega o set de fotos da cidade selecionada ou SP como padrão
            const propertyImages = gallery[cityCode] || gallery['SP'];

            // Dados específicos para cada um dos 5 cards (Tipo e Quartos)
            const cardTypes = ['Studio', 'Apartamento', 'Apartamento', 'Sobrado', 'Sobrado'];
            const cardBedrooms = [1, 1, 2, 3, 4]; // Quantidade de quartos para cada card

            // Generate 5 mock properties
            for (let i = 0; i < 5; i++) {
                const neighborhood = neighborhoods[i % neighborhoods.length];
                const type = cardTypes[i]; // Pega o tipo fixo da lista acima
                const price = prices[i];
                const imgUrl = propertyImages[i] || gallery['SP'][i];

                // Random specs dentro da nova faixa solicitada (39 a 49m²)
                const area = Math.floor(Math.random() * 11) + 39;
                const bedrooms = cardBedrooms[i]; // Pega a qtd de quartos da lista acima

                // Create Card HTML
                const card = document.createElement('div');
                card.className = 'property-card';

                // Color gradient based on type roughly
                const isHouse = type.includes('Casa') || type.includes('Sobrado');

                card.innerHTML = `
                        <div class="property-img"
                            style="background-image: url('${imgUrl}');">
                            <span class="tag" style="background: ${isHouse ? '#1f2937' : 'var(--primary)'}">${type}</span>
                            <div style="position: absolute; bottom: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);"></div>
                        </div>
                        <div class="property-content">
                            <div class="property-title" style="margin-bottom: 0.5rem;">${type} em ${neighborhood}</div>
                            <div class="property-details" style="margin-bottom: 1.2rem;">${area}m² • ${bedrooms} Quartos • ${type}</div>
                            <div class="property-footer">
                                <div>
                                    <div class="price-label">Valor de Mercado</div>
                                    <div class="price-value">${formatMoney(price)}</div>
                                </div>
                                <button class="btn btn" onclick="selectProperty(${price})" style="background-color: var(--accent); white-space:nowrap; padding: 0.6rem 1.2rem;">Simular</button>
                            </div>
                        </div>
                `;

                container.appendChild(card);
            }
        }

        function selectLocation(loc) {
            selectedCity = loc;
            document.getElementById('portfolio-title').innerText = "Portfólio: " + loc;

            generateProperties(loc);

            // Move to next step
            navigateTo('view-portfolio', 'Etapa 4 de 7');
        }

        /*******************************************************************************
         * LOCALIZAÇÃO DOS CÁLCULOS (REGRAS RÍGIDAS):
         * - Consórcio: Valor selecionado é a CARTA BRUTA. Lance Embutido reduz o líquido.
         * - Financiamento: Tabela Price (Anuidade Composta).
         ******************************************************************************/
        function renderResults() {
            // 1. Captura de Taxas e Lances
            const taxaAdmTotal = Number(document.getElementById('cfg-taxa-adm').value) / 100;
            const taxaJurosCaixaAno = Number(document.getElementById('cfg-taxa-caixa').value) / 100;
            const taxaJurosPrivadoAno = Number(document.getElementById('cfg-taxa-privado').value) / 100;

            const embeddedBidPercent = Number(document.getElementById('input-bid-embedded').value) / 100;
            const fixedBidStr = document.getElementById('input-bid-fixed').value.replace(/\D/g, "");
            const fixedBidValue = Number(fixedBidStr) / 100;

            // 2. CÁLCULO CONSÓRCIO (Regra: Valor selecionado = Carta Bruta)
            const cartaBruta = currentPropertyValue;
            const embeddedBidValue = cartaBruta * embeddedBidPercent;
            const marketVal = cartaBruta - embeddedBidValue; // Valor Líquido para o cliente usar

            const valorTaxaAdmTotal = cartaBruta * taxaAdmTotal;
            const custoTotalContratado = cartaBruta + valorTaxaAdmTotal;

            // Saldo Devedor = (Valor total contratado) - (Lance Embutido) - (Lance Livre)
            // Lance embutido abate do saldo devedor, conforme solicitado
            const saldoDevedorConsorcio = custoTotalContratado - embeddedBidValue - fixedBidValue;
            const consMonthly = saldoDevedorConsorcio / 180;

            // Custo Total Final p/ o cliente = Soma das parcelas + Lance Livre (que saiu do bolso)
            const consCustoEfetivoFinal = (consMonthly * 180) + fixedBidValue;

            // 3. FINANCIAMENTO (TABELA PRICE)
            const calcularPrice = (valor, taxaAno, meses) => {
                const i = Math.pow(1 + taxaAno, 1 / 12) - 1;
                const pmt = valor * ((i * Math.pow(1 + i, meses)) / (Math.pow(1 + i, meses) - 1));
                const total = pmt * meses;
                return { pmt, total };
            };
            const resultCaixa = calcularPrice(marketVal, taxaJurosCaixaAno, 360);
            const resultBank = calcularPrice(marketVal, taxaJurosPrivadoAno, 360);

            // --- ATUALIZAÇÃO DA UI ---
            document.getElementById('res-val-market').innerText = formatMoney(cartaBruta);
            const infoEl = document.getElementById('res-carta-bruta-info');
            if (infoEl) infoEl.innerText = embeddedBidPercent > 0 ? `Valor Líquido p/ Compra: ${formatMoney(marketVal)} | Lance Embutido: ${formatMoney(embeddedBidValue)}` : `Valor Líquido p/ Compra: ${formatMoney(marketVal)}`;

            document.getElementById('res-cons-monthly').innerText = formatMoney(consMonthly);
            document.getElementById('res-cons-total').innerText = formatMoney(consCustoEfetivoFinal);

            const breakdownEl = document.getElementById('res-cons-breakdown');
            if (breakdownEl) {
                breakdownEl.innerHTML = `
                    <div style="text-align:left; font-size:0.75rem; margin-top:1.5rem; border-top:1px solid rgba(255,255,255,0.2); padding-top:1rem; color:rgba(255,255,255,0.9);">
                        <div style="display:flex; justify-content:space-between; margin-bottom:4px;"><span>💵 Recebe Líquido:</span> <span style="font-weight:700; color:#6ee7b7;">${formatMoney(marketVal)}</span></div>
                        <div style="display:flex; justify-content:space-between; margin-bottom:4px;"><span>📄 Valor da Carta:</span> <span>${formatMoney(cartaBruta)}</span></div>
                        <div style="display:flex; justify-content:space-between; margin-bottom:4px;"><span>📥 Lance Livre:</span> <span>${formatMoney(fixedBidValue)}</span></div>
                        <div style="display:flex; justify-content:space-between; margin-bottom:4px;"><span>✂️ Lance Embutido:</span> <span>${formatMoney(embeddedBidValue)}</span></div>
                    </div>
                `;
            }

            document.getElementById('res-caixa-monthly').innerText = formatMoney(resultCaixa.pmt);
            document.getElementById('res-caixa-total').innerText = formatMoney(resultCaixa.total);
            document.getElementById('res-caixa-interest').innerText = `Total pago: ${formatMoney(resultCaixa.total)}`;

            document.getElementById('res-bank-monthly').innerText = formatMoney(resultBank.pmt);
            document.getElementById('res-bank-total').innerText = formatMoney(resultBank.total);
            document.getElementById('res-bank-interest').innerText = `Total pago: ${formatMoney(resultBank.total)}`;

            // Tabela
            document.getElementById('res-table-cons-5').innerText = formatMoney(consMonthly * 60);
            document.getElementById('res-table-cons-10').innerText = formatMoney(consMonthly * 120);
            document.getElementById('res-table-cons-final').innerText = formatMoney(consCustoEfetivoFinal);
            document.getElementById('res-table-caixa-5').innerText = formatMoney(resultCaixa.pmt * 60);
            document.getElementById('res-table-caixa-10').innerText = formatMoney(resultCaixa.pmt * 120);
            document.getElementById('res-table-caixa-final').innerText = formatMoney(resultCaixa.total);
            document.getElementById('res-table-bank-5').innerText = formatMoney(resultBank.pmt * 60);
            document.getElementById('res-table-bank-10').innerText = formatMoney(resultBank.pmt * 120);
            document.getElementById('res-table-bank-final').innerText = formatMoney(resultBank.total);
        }


    </script>
</body>

</html>/* End custom CSS */