República Dominicana

Relux Real Estate

relux.alterestate.com

<div id="relux-calculator" class="relux-calculator-wrapper" style="font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;">

  <style>
    /* Estilos locales (si Tailwind no está disponible funcionan igual) */
    .relux-header {
      background: linear-gradient(135deg, #13b7ba 0%, #0f9a9d 50%, #0d7e81 100%);
      color: #ffffff;
      padding: 2.25rem 1rem;
      border-radius: 12px;
      margin-bottom: 1rem;
    }
    .relux-header .title { font-size: 2.25rem; font-weight: 800; margin: 0; line-height: 1.02; }
    .relux-header .subtitle { margin-top: .25rem; opacity: .95; font-size: 1.05rem; }
    .relux-card { background: #ffffff; border-radius: 12px; padding: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); }
    .relux-input { width:100%; padding:.6rem; border:1px solid #e5e7eb; border-radius:8px; }
    .relux-btn { background: linear-gradient(135deg,#13b7ba,#0f9a9d); color:#fff; border:0; padding:.75rem; border-radius:10px; font-weight:700; cursor:pointer; }
    .tab-btn { padding:.6rem 1rem; border-radius:10px; border:0; cursor:pointer; }
    .tab-active { background: linear-gradient(135deg,#13b7ba,#0f9a9d); color:#fff; }
    .metric { font-weight:700; font-size:1.25rem; }
    .progress-bar { height:1rem; border-radius:999px; background:linear-gradient(90deg,#f87171,#f59e0b,#34d399); width:0%; transition: width .6s ease, background .3s ease; }
    @media (max-width:720px){ .relux-header .title { font-size:1.5rem } }
  </style>

  
  <header class="relux-header" role="banner" aria-label="Relux Calculadora Header">
    <div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;">
      <div style="flex:1;min-width:220px">
        <h1 class="title">Calculadora de Rentabilidad Inmobiliaria</h1>
        <div class="subtitle">Analiza el potencial de rentabilidad de tu inversión en República Dominicana</div>
      </div>
      <div style="text-align:right;min-width:120px">
        <div id="roiDisplay" style="font-size:1.6rem;font-weight:800">0%</div>
        <div style="opacity:.85;font-size:.9rem">ROI Estimado</div>
      </div>
    </div>
  </header>

  <main style="max-width:1100px;margin:0 auto;">
    
    <div style="display:flex;gap:.5rem;margin-bottom:1rem;">
      <button type="button" data-tab="calculator" class="tab-btn tab-active" aria-pressed="true">📊 Calculadora</button>
      <button type="button" data-tab="results" class="tab-btn" aria-pressed="false">📋 Resultados</button>
    </div>

    
    <section id="calculator-tab" class="tab-content">
      <form id="investmentForm" class="relux-card" aria-label="Formulario calculadora" style="display:grid;gap:1rem;">
        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;">
          <div>
            <label for="evaluationType" style="font-weight:700;display:block;margin-bottom:.25rem">Tipo de Evaluación</label>
            <select id="evaluationType" class="relux-input" aria-label="Tipo de evaluación">
              <option value="full-investment">Inversión Completa (Compra + Renta)</option>
              <option value="rental-only">Solo Rentabilidad de Renta</option>
            </select>
          </div>
          <div>
            <label for="currency" style="font-weight:700;display:block;margin-bottom:.25rem">Moneda</label>
            <select id="currency" class="relux-input" aria-label="Moneda">
              <option value="DOP">Pesos Dominicanos (RD$)</option>
              <option value="USD" selected>Dólares (US$)</option>
            </select>
          </div>
        </div>

        <div id="purchaseFields">
          <label style="font-weight:700">Precio de la Propiedad <span id="propertyPriceCurrency"></span></label>
          <input id="propertyPrice" type="number" class="relux-input" placeholder="260000" min="0" aria-label="Precio de la propiedad">

          <label style="font-weight:700;margin-top:.5rem">Pago Inicial (%)</label>
          <input id="downPayment" type="number" class="relux-input" placeholder="20" min="0" max="100" aria-label="Pago inicial">

          <label style="font-weight:700;margin-top:.5rem">Gastos adicionales <span id="renovationCurrency"></span></label>
          <input id="renovationCost" type="number" class="relux-input" placeholder="15500" min="0" aria-label="Gastos adicionales">
        </div>

        <div id="rentalOnlyFields" style="display:none;">
          <label style="font-weight:700">Valor de la Propiedad <span id="currentValueCurrency"></span></label>
          <input id="currentPropertyValue" type="number" class="relux-input" placeholder="260000" min="0">

          <label style="font-weight:700;margin-top:.5rem">Costos de Preparación/Amueblado <span id="setupCurrency"></span></label>
          <input id="setupCost" type="number" class="relux-input" placeholder="8600" min="0">
        </div>

        <label style="font-weight:700">Ingreso Mensual Estimado <span id="rentCurrency"></span></label>
        <input id="monthlyRent" type="number" class="relux-input" placeholder="1860" min="0">

        <label style="font-weight:700">Tasa de Ocupación (%)</label>
        <input id="occupancyRate" type="number" class="relux-input" placeholder="80" min="0" max="100">

        <label style="font-weight:700">Gastos Mensuales <span id="expensesCurrency"></span></label>
        <input id="monthlyExpenses" type="number" class="relux-input" placeholder="415" min="0">

        <button type="submit" class="relux-btn" style="margin-top:.4rem">🔍 Calcular Rentabilidad</button>
      </form>
    </section>

    
    <section id="results-tab" class="tab-content" style="display:none;margin-top:1rem">
      <div class="relux-card" style="text-align:center">
        <h3 style="margin:0 0 .5

Evalúa tu inversión para rentas cortas tipo Airbnb: herramienta gratis para definir la rentabilidad de tu propiedad ya adquirida o la rentabilidad de tu propiedad deseada. Compra en base a datos y a la asesoría de Relux Real Estate.