Template Web [Editar]

Nome

Ativo

HTML

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Landing</title>

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/lib/BootStrapIcons/bootstrap-icons.min.css">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --accent: #e8431a;
      --accent-light: #3B82F6;
      --accent-muted: rgba(37,99,235,0.1);
      --bg: #fff8f5;
      --surface: #fff8f5; 
      --surface2: #e20514;//vermelho CC
      --border: rgba(0,0,0,0.08);
      --border-hover: rgba(37,99,235,0.3);
      --text: #111111;
      --text-muted: rgba(17,17,17,0.5);
      --green: #e8431a;
      --green-wa: #e8431a;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-x: hidden;
      padding-bottom: 80px;
    }
    .page { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; }



    .sticky-btn {
      flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 16px 12px; text-decoration: none;
      font-size: 0.82rem; font-weight: 700; transition: all 0.2s;
      cursor: pointer; border: none; background: transparent;
    }
    .sticky-btn-wa { color: var(--green-wa); border-right: 1px solid var(--border); }
    .sticky-btn-wa:hover { background: rgba(37,211,102,0.06); }
    .sticky-btn-eval { color: var(--accent); }
    .sticky-btn-eval:hover { background: var(--accent-muted); }
    .sticky-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* ── COVER ── */
    .cover { width: 100%; height: 300px; position: relative; overflow: hidden; background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 60%, #f0fdf4 100%); }
    .cover-img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
    .cover::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, transparent, var(--bg)); }
    .cover-badge {
      position: absolute; top: 16px; left: 16px; z-index: 2;
      background: rgba(255,255,255,0.85); border: 1px solid rgba(37,99,235,0.2);
      backdrop-filter: blur(8px); border-radius: 20px;
      padding: 5px 12px; font-size: 0.62rem; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase; color: var(--accent);
    }
    .cover-agency {
      position: absolute; top: 16px; right: 16px; z-index: 2;
      background: rgba(255,255,255,0.85); border: 1px solid var(--border);
      backdrop-filter: blur(8px); border-radius: 8px;
      padding: 5px 12px; font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
    }

    /* ── PROFILE ── */
    .profile { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 20px; margin-top: -52px; position: relative; z-index: 2; }
    .avatar-wrap { position: relative; margin-bottom: 14px; }
    .avatar-ring { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(var(--accent-light), #93C5FD, var(--accent-light)); animation: spin 5s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .avatar { position: relative; width: 100px; height: 100px; border-radius: 50%; background: #dbeafe; border: 4px solid var(--bg); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; color: var(--accent); overflow: hidden; z-index: 1; }
    .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; }
    .name { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; color: var(--text); text-align: center; }
    .handle { font-size: 0.78rem; color: var(--accent); font-weight: 500; margin-bottom: 6px; }
    .location { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
    .ami-badge {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(37,99,235,0.07); border: 1px solid rgba(37,99,235,0.2);
      border-radius: 20px; padding: 3px 10px;
      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px;
      color: var(--accent); margin-bottom: 10px;
    }
    .ami-badge svg { width: 11px; height: 11px; fill: var(--accent); }
    .bio { font-size: 0.82rem; color: var(--text-muted); text-align: center; line-height: 1.6; max-width: 300px; margin-bottom: 20px; }

    /* ── STATS ── */
    .stats { display: flex; gap: 0; margin-bottom: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; width: 100%; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
    .stat { flex: 1; padding: 14px 10px; text-align: center; border-right: 1px solid var(--border); }
    .stat:last-child { border-right: none; }
    .stat-value { font-size: 1.1rem; font-weight: 800; color: var(--accent); display: block; }
    .stat-label { font-size: 0.63rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

    /* ── SOCIAL ── */
    .social-icons { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
    .social-icons a { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.2s; color: var(--text-muted); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
    .social-icons a:hover { border-color: var(--accent); background: var(--accent-muted); color: var(--accent); transform: translateY(-2px); }
    .social-icons svg { width: 17px; height: 17px; fill: currentColor; }

    /* ── INTENT BUTTONS ── */
    .intent-wrap { width: 100%; padding: 0 20px; margin-bottom: 14px; }
    .intent-label-top { font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); text-align: center; margin-bottom: 10px; }
    .intent-btns { display: flex; flex-direction: column; gap: 8px; }
    .intent-btn {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 16px; border-radius: 12px; text-decoration: none;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text); font-size: 0.88rem; font-weight: 700;
      transition: all 0.2s; box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    }
    .intent-btn:hover { border-color: var(--border-hover); background: var(--accent-muted); transform: translateX(4px); box-shadow: 0 4px 16px rgba(37,99,235,0.1); }
    .intent-icon { font-size: 1.2rem; }
    .intent-label { flex: 1; }
    .intent-arrow { font-size: 0.9rem; color: var(--text-muted); }

    /* ── LEAD MAGNET ── */
    .lead-magnet { width: 100%; padding: 0 20px; margin-bottom: 14px; }
    .lead-card {
      background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
      border: 1px solid rgba(37,99,235,0.15);
      border-radius: 16px; padding: 20px;
      display: flex; flex-direction: column; align-items: flex-start;
    }
    .lead-eyebrow { font-size: 0.6rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }
    .lead-headline { font-size: 1.05rem; font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 6px; }
    .lead-sub { font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 16px; }
    .lead-btn {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--green); color: #fff;
      padding: 12px 20px; border-radius: 10px;
      font-size: 0.84rem; font-weight: 700; text-decoration: none;
      transition: all 0.2s; width: 100%; justify-content: center;
      box-shadow: 0 4px 14px rgba(22,163,74,0.25);
    }
    .lead-btn:hover { background: #15803D; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(22,163,74,0.3); }

    /* ── BUTTONS ── */
    .action-row { width: 100%; padding: 0 20px; display: flex; gap: 10px; margin-bottom: 10px; }
    .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; border-radius: 12px; text-decoration: none; font-size: 0.88rem; font-weight: 700; transition: all 0.2s; cursor: pointer; border: none; }
    .btn-wa { background: var(--green-wa); color: #fff; }
    .btn-wa:hover { background: #20bd5a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,0.25); }
    .btn-accent { background: var(--accent); color: #fff; }
    .btn-accent:hover { background: var(--accent-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.25); }
    .btn-outline { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
    .btn-outline:hover { border-color: var(--accent); background: var(--accent-muted); color: var(--accent); transform: translateY(-2px); }
    .btn-vcf { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
    .btn-vcf:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

    /* ── ZONAS ── */
    .zones-wrap { width: 100%; padding: 0 20px; margin-bottom: 6px; }
    .zones-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; text-align: center; }
    .zones { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    .zone-tag { font-size: 0.72rem; font-weight: 600; padding: 5px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }

    /* ── SECTION LABEL ── */
    .section-label { width: 100%; padding: 0 20px; display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; font-size: 0.63rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-muted); }
    .section-label::before, .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

    /* ── PROPERTY CARDS ── */
    .properties { width: 100%; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .prop-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--text); transition: all 0.22s; box-shadow: 0 2px 8px rgba(0,0,0,0.05); position: relative; }
    .prop-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.1); }
    .prop-badge { position: absolute; top: 8px; left: 8px; z-index: 1; font-size: 0.55rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; padding: 3px 8px; border-radius: 20px; }
    .badge-new  { background: var(--green); color: #fff; }
    .badge-excl { background: var(--accent); color: #fff; }
    .badge-last { background: #EF4444; color: #fff; }

    .prop-img { width: 100%;    height: 200px;    background-size: cover;    background-position: center;    background-repeat: no-repeat;    border-radius: 8px 8px 0 0;}

    .prop-img-placeholder { width: 100%; height: 110px; background: linear-gradient(135deg, #dbeafe, #eff6ff); display: flex; align-items: center; justify-content: center; font-size: 32px; }
    .prop-body { padding: 10px 12px; }
    .prop-price { font-size: 0.88rem; font-weight: 800; color: var(--accent); margin-bottom: 3px; }
    .prop-title { font-size: 0.78rem; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .prop-loc { font-size: 0.68rem; color: var(--text-muted); }
    .prop-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
    .prop-tag { font-size: 0.6rem; padding: 2px 7px; border-radius: 20px; background: var(--accent-muted); color: var(--accent); border: 1px solid rgba(37,99,235,0.15); }

    /* ── LINK CARDS ── */
    .cards { width: 100%; padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
    .card { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--text); transition: all 0.22s; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.1); }
    .card-thumb { width: 62px; height: 62px; border-radius: 10px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; }
    .card-thumb.blue  { background: #DBEAFE; }
    .card-thumb.green { background: #DCFCE7; }
    .card-body { flex: 1; min-width: 0; }
    .card-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
    .card-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-sub { font-size: 0.73rem; color: var(--text-muted); line-height: 1.4; }
    .card-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-muted); flex-shrink: 0; transition: all 0.22s; }
    .card:hover .card-arrow { background: var(--accent); border-color: var(--accent); color: #fff; }

    /* ── BLOG ── */
    .blog-articles { width: 100%; padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
    .blog-card {
      display: flex; gap: 0; background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--text);
      transition: all 0.22s; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .blog-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.1); }
    .blog-thumb {
      width: 84px; flex-shrink: 0;
      background: linear-gradient(135deg, #dbeafe, #eff6ff);
      display: flex; align-items: center; justify-content: center; font-size: 2rem;
    }
    .blog-body { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
    .blog-cat { font-size: 0.58rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
    .blog-title { font-size: 0.8rem; font-weight: 700; line-height: 1.4; color: var(--text); }
    .blog-meta { font-size: 0.64rem; color: var(--text-muted); }

    /* ── DICAS RÁPIDAS ── */
    .tips-grid { width: 100%; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .tip-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; padding: 14px; text-decoration: none; color: var(--text);
      display: flex; flex-direction: column; gap: 8px; transition: all 0.2s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .tip-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,99,235,0.1); }
    .tip-icon { font-size: 1.3rem; }
    .tip-title { font-size: 0.78rem; font-weight: 700; line-height: 1.45; color: var(--text); flex: 1; }
    .tip-cta { font-size: 0.68rem; font-weight: 700; color: var(--accent); }

    /* ── TESTEMUNHOS ── */
    .testimonials { width: 100%; padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
    .testimonial-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .stars { display: flex; gap: 2px; margin-bottom: 8px; }
    .star { color: #FBBF24; font-size: 0.9rem; }
    .testimonial-text { font-size: 0.82rem; color: var(--text); line-height: 1.6; margin-bottom: 12px; font-style: italic; }
    .testimonial-author { display: flex; align-items: center; gap: 10px; }
    .testimonial-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-muted); border: 1px solid rgba(37,99,235,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 800; color: var(--accent); flex-shrink: 0; }
    .testimonial-name { font-size: 0.78rem; font-weight: 700; color: var(--text); }
    .testimonial-context { font-size: 0.65rem; color: var(--text-muted); }

    /* ── CALCULADORA ── */
    .calc-wrap { width: 100%; padding: 0 20px; }
    .calc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
    .calc-intro { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; }
    .calc-field { margin-bottom: 14px; }
    .calc-field label { display: flex; justify-content: space-between; font-size: 0.74rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
    .calc-field label span { font-weight: 800; color: var(--accent); }
    .calc-slider { width: 100%; -webkit-appearance: none; height: 4px; border-radius: 2px; background: #DBEAFE; outline: none; }
    .calc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--accent); }
    .calc-row { display: flex; gap: 10px; margin-bottom: 14px; }
    .calc-input-group { flex: 1; display: flex; flex-direction: column; gap: 5px; }
    .calc-input-group label { font-size: 0.72rem; font-weight: 600; color: var(--text); }
    .calc-select, .calc-input { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.84rem; font-family: inherit; font-weight: 600; outline: none; }
    .calc-select:focus, .calc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
    .calc-result-box { background: var(--bg); border: 1px solid rgba(37,99,235,0.15); border-radius: 12px; padding: 16px; text-align: center; }
    .calc-result-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
    .calc-result-value { font-size: 2rem; font-weight: 900; color: var(--accent); margin-bottom: 12px; letter-spacing: -1px; }
    .calc-result-meta { display: flex; gap: 16px; justify-content: center; margin-bottom: 10px; }
    .calc-meta-item { text-align: center; }
    .calc-meta-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
    .calc-meta-value { font-size: 0.82rem; font-weight: 800; color: var(--text); }
    .calc-disclaimer { font-size: 0.62rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
    .calc-cta { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 0.8rem; font-weight: 700; text-decoration: none; transition: all 0.2s; }
    .calc-cta:hover { background: var(--accent-light); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.25); }

    /* ── VÍDEOS ── */
    .videos-grid { width: 100%; padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
    .video-thumb-card { display: block; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: all 0.22s; }
    .video-thumb-card:hover { border-color: rgba(37,99,235,0.3); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(37,99,235,0.08); }
    .video-thumb-wrap { width: 100%; height: 135px; background-size: cover; background-position: center; background-color: #dbeafe; position: relative; }
    .video-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.2); transition: all 0.2s; }
    .video-play-icon { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: 4px; }
    .video-thumb-card:hover .video-play-btn { background: rgba(0,0,0,0.1); }
    .video-thumb-body { padding: 10px 14px 12px; }
    .video-thumb-title { font-size: 0.82rem; font-weight: 700; line-height: 1.4; color: var(--text); margin-bottom: 4px; }
    .video-thumb-meta { font-size: 0.65rem; color: var(--text-muted); }

    /* ── FOOTER ── */
    .footer { margin-top: 48px; text-align: center; font-size: 0.68rem; color: var(--text-muted); padding: 0 20px; line-height: 1.6; opacity: 0.6; }
    .footer a { color: var(--accent); text-decoration: none; }
    .footer-ami { font-size: 0.62rem; color: var(--text-muted); margin-top: 4px; opacity: 0.7; }

    /* ── ANIMATIONS ── */
    .fade-in { opacity: 0; transform: translateY(12px); animation: fadeUp 0.45s ease forwards; }
    @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
    .d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}.d4{animation-delay:.24s}
    .d5{animation-delay:.30s}.d6{animation-delay:.36s}.d7{animation-delay:.42s}.d8{animation-delay:.48s}

    @media(max-width:360px){ .properties{grid-template-columns:1fr} .action-row{flex-direction:column} }

    /* ── COLUMN WRAPPERS (mobile: passthrough) ── */
    .col-left, .col-right { width:100%; display:flex; flex-direction:column; align-items:center; }

    /* ── DESKTOP CONTACT (hidden on mobile) ── */
    .desktop-contact { display:none; }

    /* ══════════════════════════════════════════
       DESKTOP LAYOUT (≥ 900 px)
       ══════════════════════════════════════════ */
    @media(min-width:900px){
      body { padding-bottom: 0; padding: 0 16px; }
      .sticky-bar { display:none !important; }
      .page { max-width: 1180px; width: 100%; flex-direction: row; align-items: flex-start; padding: 36px 0 64px; gap: 0; }
      .col-left { width: 340px; flex-shrink: 0; align-items: stretch; align-self: flex-start; position: sticky; top: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.1); }
      .col-right { flex: 1; min-width: 0; align-items: stretch; padding-left: 28px; }
      .cover { height: 200px; border-radius: 0; width: 100%; max-width: 100%; }
      .cover::after { height: 80px; }
      .profile { padding: 0 18px; margin-top: -52px; width: 100%; }
      .bio { max-width: 100%; }
      .stats { width: 100%; align-items: stretch; }
      .stat { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 64px; }
      .stat-label { font-size: 0.58rem; line-height: 1.3; }
      .intent-wrap { padding: 0; width: 100%; }
      .lead-magnet { padding: 0; width: 100%; }
      .action-row { padding: 0; width: 100%; }
      .zones-wrap { padding: 0; width: 100%; }
      .desktop-contact { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 20px; border-top: 1px solid var(--border); margin-top: 10px; width: 100%; }
      .desktop-contact .btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 0.84rem; }
      .section-label { padding: 0; margin: 28px 0 14px; width: 100%; }
      .properties { padding: 0; width: 100%; grid-template-columns: repeat(3, 1fr); }
      .cards { padding: 0; width: 100%; }
      .blog-articles { padding: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .tips-grid { padding: 0; width: 100%; grid-template-columns: repeat(4, 1fr); }
      .testimonials { padding: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .videos-grid { padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
      .video-thumb-wrap { height: 150px; }
      .calc-wrap { padding: 0; width: 100%; }
      .footer { padding: 0; text-align: left; margin-top: 40px; width: 100%; }
    }
  </style>
</head>

<body>

<div class="page">
<div class="col-left">

  
  <div class="cover fade-in d1">
    <img class="cover-img" src="../imagens/fundoweb.png" alt="" onerror="this.style.display='none'">
    <span class="cover-badge">Consultor Imobiliário</span>
    <span class="cover-agency">CC Evora</span>
  </div>

  
  <div class="profile">
    <div class="avatar-wrap fade-in d2">
      <div class="avatar-ring"></div>
      <div class="avatar">
        <img src="{{PhotoUrl}}" alt="{{displayName}}" onerror="this.style.display='none'; this.parentNode.innerHTML='JF';">
      </div>
    </div>
    <h1 class="name fade-in d2">{{displayName}}</h1>
    <div class="handle fade-in d2">@joao.ferreira.kw</div>
    <div class="location fade-in d2">📍 Porto · Portugal</div>
    <div class="ami-badge fade-in d2">
      <svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>
      AMI nº {{Ami}}
    </div>
    <p class="bio fade-in d3">Especialista em habitação e investimento imobiliário na região do Porto.<br>O teu parceiro de confiança no Norte.</p>

    <div class="stats fade-in d3">
      <div class="stat"><span class="stat-value">+120</span><span class="stat-label">Negócios</span></div>
      <div class="stat"><span class="stat-value">7</span><span class="stat-label">Anos exp.</span></div>
      <div class="stat"><span class="stat-value">97%</span><span class="stat-label">Satisfação</span></div>
    </div>

    <div class="social-icons fade-in d3">
      <a href="{{instagram}}" title="Instagram" target="_blank"><svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg></a>
      <a href="{{facebook}}" title="Facebook" target="_blank"><svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg></a>
      <a href="{{linkedin}}" title="LinkedIn" target="_blank"><svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
      <a href="{{youtube}}" title="YouTube" target="_blank"><svg viewBox="0 0 24 24"><path d="M23.495 6.205a3.007 3.007 0 00-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 00.527 6.205a31.247 31.247 0 00-.522 5.805 31.247 31.247 0 00.522 5.783 3.007 3.007 0 002.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 002.088-2.088 31.247 31.247 0 00.5-5.783 31.247 31.247 0 00-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/></svg></a>
      <a href="{{whatsapp}}" title="WhatsApp" target="_blank"><svg 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></a>
    </div>

    
    <div class="intent-wrap fade-in d4">
      <div class="intent-label-top">Como posso ajudar?</div>
      <div class="intent-btns">
        <a href="{{whatsapp}}?text=Ola, Procuro casa na zona indicada" target="_blank" class="intent-btn">
          <span class="intent-icon">🏠</span>
          <span class="intent-label">Quero comprar casa</span>
          <span class="intent-arrow">→</span>
        </a>
        <a href="{{whatsapp}}?text=Quero vender a minha casa." target="_blank" class="intent-btn">
          <span class="intent-icon">💰</span>
          <span class="intent-label">Quero vender</span>
          <span class="intent-arrow">→</span>
        </a>
        <a href="{{whatsapp}}?text=Oi, Sou investidor." target="_blank" class="intent-btn">
          <span class="intent-icon">📈</span>
          <span class="intent-label">Sou investidor</span>
          <span class="intent-arrow">→</span>
        </a>
      </div>
    </div>

    
    <div class="lead-magnet fade-in d4">
      <div class="lead-card">
        <div class="lead-eyebrow">Avaliação gratuita</div>
        <div class="lead-headline">Descobre quanto vale a tua casa em 24h</div>
        <div class="lead-sub">Sem compromisso. Sem custos. Só precisas de me dizer a morada e eu trato do resto.</div>
        <a href="{{whatsapp}}?text=Ola. gostaria de uma avaliação gratuita á minha casa" class="lead-btn" target="_blank">
          <svg style="width:17px;height:17px;fill:#fff;flex-shrink:0" 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>
          Pedir avaliação gratuita
        </a>
      </div>
    </div>

    
    <div class="action-row fade-in d4">
      <button onclick="{{VCard}}" class="btn btn-vcf">
        <svg style="width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        Guardar Contacto
      </button>
      <a href="#imoveis" class="btn btn-outline">
        <svg style="width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0" viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        Ver imóveis
      </a>
    </div>

    
    <div class="zones-wrap fade-in d4">
      <div class="zones-label">Zonas de atuação</div>
      <div class="zones">
        <span class="zone-tag">📍 Porto</span>
        <span class="zone-tag">📍 Gaia</span>
        <span class="zone-tag">📍 Matosinhos</span>
        <span class="zone-tag">📍 Maia</span>
        <span class="zone-tag">📍 Braga</span>
        <span class="zone-tag">📍 Gondomar</span>
      </div>
    </div>
  </div>

  
  <div class="desktop-contact">
    <a href="{{whatsapp}}?text=Ol%C3%A1%20Jo%C3%A3o%2C%20vim%20pela%20sua%20p%C3%A1gina%20e%20gostava%20de%20falar%20consigo." target="_blank" class="btn btn-wa">
      <svg style="width:17px;height:17px;fill:#fff;flex-shrink:0" 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>
      Falar por WhatsApp
    </a>
    <a href="tel:{{mobile}}" class="btn btn-vcf">📞 {{mobile}}</a>
    <a href="mailto:{{email}}" class="btn btn-outline">✉️ {{email}}</a>
  </div>

</div>
<div class="col-right">

  
  <div class="section-label fade-in d5" id="imoveis">Imóveis em destaque</div>
  <div class="properties fade-in d5">


{{#each properties}}
    <a href="{{Url}}" class="prop-card" target="_blank">
          <span class="prop-badge badge-new">Novo</span>
          <div class="prop-img" style="background-image: url('{{LocalImage}}');"></div>
          <div class="prop-body">
          <div class="prop-price">{{PriceText}} €</div>
          <div class="prop-title">{{Title}}</div>
           <div class="prop-loc">📍 {{Description}}</div>
           <div class="prop-tags">
              <span class="prop-tag">{{Bedrooms}} quartos</span>
              <span class="prop-tag">{{Area}}</span>
<i class="bi bi-door-open"></i> {{Bedrooms}}
    <i class="bi bi-arrows-fullscreen"></i>{{Area}}
           </div>
  </div>
    </a>
{{/each}}


  </div>

  
  <div class="section-label fade-in d6">Os meus links</div>
  <div class="cards">
    <a href="{{site}}" class="card fade-in d6">
      <div class="card-thumb blue">🌐</div>
      <div class="card-body">
        <div class="card-label">Website</div>
        <div class="card-title">{{site}}</div>
        <div class="card-sub">Portfólio completo e imóveis disponíveis no Porto</div>
      </div>
      <div class="card-arrow">↗</div>
    </a>
    <a href="#" class="card fade-in d6">
      <div class="card-thumb green">🏢</div>
      <div class="card-body">
        <div class="card-label">Agência</div>
        <div class="card-title">KW Portugal</div>
        <div class="card-sub">Visita o site da minha agência</div>
      </div>
      <div class="card-arrow">↗</div>
    </a>
  </div>

  
  <div class="section-label fade-in d6">Últimos artigos</div>
  <div class="blog-articles fade-in d6">
    <a href="#" target="_blank" class="blog-card">
      <div class="blog-thumb">📊</div>
      <div class="blog-body">
        <div class="blog-cat">Mercado</div>
        <div class="blog-title">O mercado imobiliário no Porto: tendências e preços em 2026</div>
        <div class="blog-meta">6 min · Ler artigo →</div>
      </div>
    </a>
    <a href="#" target="_blank" class="blog-card">
      <div class="blog-thumb">🏠</div>
      <div class="blog-body">
        <div class="blog-cat">Vendedores</div>
        <div class="blog-title">5 segredos para vender a tua casa mais rápido e por mais dinheiro</div>
        <div class="blog-meta">4 min · Ler artigo →</div>
      </div>
    </a>
    <a href="#" target="_blank" class="blog-card">
      <div class="blog-thumb">🏦</div>
      <div class="blog-body">
        <div class="blog-cat">Crédito</div>
        <div class="blog-title">Crédito habitação em 2026: tudo o que precisas de saber antes de avançar</div>
        <div class="blog-meta">8 min · Ler artigo →</div>
      </div>
    </a>
  </div>

  
  <div class="section-label fade-in d6">O que dizem os clientes</div>
  <div class="testimonials fade-in d6">
    <div class="testimonial-card">
      <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
      <p class="testimonial-text">Vendi o apartamento em 3 semanas, acima do preço pedido. O João conhece o mercado do Porto como ninguém e tratou de tudo com muita profissionalismo.</p>
      <div class="testimonial-author">
        <div class="testimonial-avatar">AF</div>
        <div>
          <div class="testimonial-name">Ana Filipa Moreira</div>
          <div class="testimonial-context">Vendedora · Porto · 2025</div>
        </div>
      </div>
    </div>
    <div class="testimonial-card">
      <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
      <p class="testimonial-text">Encontrámos a casa perfeita em Gaia dentro do nosso orçamento. O João foi incansável e acompanhou-nos em cada passo do processo.</p>
      <div class="testimonial-author">
        <div class="testimonial-avatar">PL</div>
        <div>
          <div class="testimonial-name">Paulo &amp; Leonor</div>
          <div class="testimonial-context">Compradores · Gaia · 2025</div>
        </div>
      </div>
    </div>
    <div class="testimonial-card">
      <div class="stars"><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span></div>
      <p class="testimonial-text">Excelente investimento em Matosinhos. O João apresentou-me opções que eu não teria encontrado sozinho e a rendibilidade tem superado as expectativas.</p>
      <div class="testimonial-author">
        <div class="testimonial-avatar">RC</div>
        <div>
          <div class="testimonial-name">Rui Carvalho</div>
          <div class="testimonial-context">Investidor · Matosinhos · 2024</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="section-label fade-in d7">Últimos vídeos</div>
  <div class="videos-grid fade-in d7">
    <a href="https://www.youtube.com/watch?v=aqz-KE-bpKQ" target="_blank" class="video-thumb-card">
      <div class="video-thumb-wrap" style="background-image:url('https://img.youtube.com/vi/aqz-KE-bpKQ/mqdefault.jpg')">
        <div class="video-play-btn"><div class="video-play-icon"><svg viewBox="0 0 24 24" fill="#1a1a1a" width="20" height="20"><path d="M8 5v14l11-7z"/></svg></div></div>
      </div>
      <div class="video-thumb-body">
        <div class="video-thumb-title">O que procurar ao comprar casa no Porto — guia completo para 2026</div>
        <div class="video-thumb-meta">YouTube · João Ferreira · KW Portugal</div>
      </div>
    </a>
    <a href="https://www.youtube.com/watch?v=aqz-KE-bpKQ" target="_blank" class="video-thumb-card">
      <div class="video-thumb-wrap" style="background-image:url('https://img.youtube.com/vi/aqz-KE-bpKQ/mqdefault.jpg')">
        <div class="video-play-btn"><div class="video-play-icon"><svg viewBox="0 0 24 24" fill="#1a1a1a" width="20" height="20"><path d="M8 5v14l11-7z"/></svg></div></div>
      </div>
      <div class="video-thumb-body">
        <div class="video-thumb-title">Investimento imobiliário no Norte de Portugal — onde comprar em 2026</div>
        <div class="video-thumb-meta">YouTube · João Ferreira · KW Portugal</div>
      </div>
    </a>
  </div>

    
  <div class="section-label fade-in d7">Simulador de crédito habitação</div>
  <div class="calc-wrap fade-in d7">
    <div class="calc-card">
      <p class="calc-intro">Calcula a tua prestação mensal estimada em segundos. Sem compromissos — é só para teres uma ideia antes de avançar.</p>
      <div class="calc-field">
        <label>Valor do imóvel <span id="lbl-valor">€ 250.000</span></label>
        <input type="range" class="calc-slider" id="calc-valor" min="50000" max="1500000" step="5000" value="250000" oninput="updateSliderLabel('calc-valor','lbl-valor',true); calcPrestacao()">
      </div>
      <div class="calc-field">
        <label>Entrada <span id="lbl-entrada">20%</span></label>
        <input type="range" class="calc-slider" id="calc-entrada" min="10" max="60" step="5" value="20" oninput="updateSliderLabel('calc-entrada','lbl-entrada',false); calcPrestacao()">
      </div>
      <div class="calc-row">
        <div class="calc-input-group">
          <label>Prazo</label>
          <select class="calc-select" id="calc-prazo" onchange="calcPrestacao()">
            <option value="15">15 anos</option>
            <option value="20">20 anos</option>
            <option value="25">25 anos</option>
            <option value="30" selected>30 anos</option>
            <option value="35">35 anos</option>
            <option value="40">40 anos</option>
          </select>
        </div>
        <div class="calc-input-group">
          <label>Taxa anual (%)</label>
          <input type="number" class="calc-input" id="calc-taxa" min="0.5" max="15" step="0.1" value="3.5" oninput="calcPrestacao()">
        </div>
      </div>
      <div class="calc-result-box">
        <div class="calc-result-label">Prestação mensal estimada</div>
        <div class="calc-result-value" id="result-prestacao">€ 898,99</div>
        <div class="calc-result-meta">
          <div class="calc-meta-item">
            <div class="calc-meta-label">A financiar</div>
            <div class="calc-meta-value" id="result-emprestimo">€ 200.000</div>
          </div>
          <div class="calc-meta-item">
            <div class="calc-meta-label">Total de juros</div>
            <div class="calc-meta-value" id="result-juros">€ 123.636</div>
          </div>
        </div>
        <p class="calc-disclaimer">Simulação meramente indicativa. Sujeito a aprovação bancária. Não inclui seguros nem outras despesas.</p>
        <a href="{{whatsapp}}?text=Ol%C3%A1%20Jo%C3%A3o%2C%20fiz%20a%20simula%C3%A7%C3%A3o%20de%20cr%C3%A9dito%20e%20gostava%20de%20conversar%20sobre%20a%20compra%20de%20um%20im%C3%B3vel." class="calc-cta" target="_blank">
          <svg style="width:16px;height:16px;fill:#fff;flex-shrink:0" 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>
          Falar com o João sobre este valor
        </a>
      </div>
    </div>
  </div>

<footer class="footer fade-in d8">
    © 2026 {{displayname}}· Todos os direitos reservados<br>
    <div class="footer-ami">Mediação imobiliária licenciada · AMI nº  {{Ami}} · IMPIC</div>
  </footer>

</div>
</div>

<script>
  function fmtEur(v){ return '€ '+Math.round(v).toLocaleString('pt-PT'); }
  function updateSliderLabel(sliderId, lblId, isEur){
    const v = document.getElementById(sliderId).value;
    document.getElementById(lblId).textContent = isEur ? fmtEur(v) : v+'%';
  }
  function calcPrestacao(){
    const valor  = parseFloat(document.getElementById('calc-valor').value);
    const entrada= parseFloat(document.getElementById('calc-entrada').value);
    const prazo  = parseInt(document.getElementById('calc-prazo').value);
    const taxa   = parseFloat(document.getElementById('calc-taxa').value);
    const P = valor * (1 - entrada/100);
    const r = (taxa/100)/12;
    const n = prazo*12;
    const pmt = r===0 ? P/n : P*(r*Math.pow(1+r,n))/(Math.pow(1+r,n)-1);
    const totalPago = pmt*n;
    const juros = totalPago - P;
    document.getElementById('result-prestacao').textContent = '€ '+pmt.toLocaleString('pt-PT',{minimumFractionDigits:2,maximumFractionDigits:2});
    document.getElementById('result-emprestimo').textContent = fmtEur(P);
    document.getElementById('result-juros').textContent = fmtEur(juros);
  }



</script>

Tokens disponíveis:
{{displayName}}, {{jobTitle}}, {{email}}, {{mobile}}, {{site}}, {{whatsapp}}, {{vcard}}, {{publicUrl}}