<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Descargar App | BitALCER Wallet</title>
  <meta name="description" content="Descarga la app oficial de BitALCER Wallet para Android. Gestiona tus finanzas en GTQ y USD desde tu teléfono.">
  <link rel="icon" href="/frontend/wallet/favicon.svg" type="image/svg+xml">
  <meta property="og:title" content="Descargar BitALCER Wallet">
  <meta property="og:description" content="App oficial para Android. Wallet digital segura en GTQ y USD para Guatemala.">
  <meta property="og:image" content="/frontend/site/assets/logo-alcer.jpeg">
  <meta property="og:type" content="website">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --night: #0A1F2E;
      --corporate: #0F2E4D;
      --emerald: #00E676;
      --gold: #C9A227;
      --text: #e2eef8;
      --muted: #94a3b8;
      --border: rgba(255,255,255,0.1);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: linear-gradient(180deg, #0A1F2E 0%, #081a28 100%);
      color: var(--text);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    /* Navbar */
    .navbar {
      position: sticky; top: 0; z-index: 40;
      display: flex; align-items: center; justify-content: space-between;
      max-width: 1200px; margin: 0 auto;
      padding: 14px 20px;
      background: rgba(10,31,46,0.85);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .brand {
      display: flex; align-items: center; gap: 8px;
      font-weight: 700; font-size: 14px; color: #fff;
      text-decoration: none;
    }
    .brand .dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--emerald);
      box-shadow: 0 0 16px rgba(0,230,118,0.75);
    }
    .nav-links { display: flex; gap: 20px; }
    .nav-links a {
      color: var(--muted); text-decoration: none; font-size: 13px;
      transition: color 200ms;
    }
    .nav-links a:hover { color: var(--emerald); }
    .nav-cta {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px; border-radius: 12px;
      background: var(--emerald); color: var(--night);
      font-size: 13px; font-weight: 600; text-decoration: none;
      transition: transform 200ms, box-shadow 200ms;
    }
    .nav-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0,230,118,0.35);
    }
    .hamburger {
      display: none; background: none; border: none; color: #fff;
      font-size: 24px; cursor: pointer;
    }

    /* Hero */
    .hero {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; justify-content: center;
      gap: 60px; padding: 80px 20px 60px;
      flex-wrap: wrap;
    }
    .hero-content { max-width: 540px; flex: 1 1 400px; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 14px; border-radius: 20px;
      background: rgba(201,162,39,0.12); border: 1px solid rgba(201,162,39,0.3);
      color: var(--gold); font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.12em;
    }
    .hero h1 {
      margin-top: 20px;
      font-size: clamp(2rem, 4.5vw, 3.2rem);
      font-weight: 800; line-height: 1.05;
      background: linear-gradient(96deg, #fff 4%, #cbeeff 38%, #00E676 98%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hero p {
      margin-top: 16px; font-size: 15px; line-height: 1.65;
      color: rgba(226,238,248,0.8); max-width: 480px;
    }
    .hero-visual {
      flex: 0 0 280px; display: flex; align-items: center; justify-content: center;
    }
    .logo-showcase {
      width: 220px; height: 220px; border-radius: 40px;
      border: 2px solid var(--border);
      background: linear-gradient(165deg, rgba(14,43,67,0.7), rgba(8,26,40,0.9));
      box-shadow: 0 30px 70px rgba(4,12,23,0.6);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      animation: floatApp 5s ease-in-out infinite;
    }
    .logo-showcase img {
      width: 180px; height: 180px; object-fit: contain; border-radius: 24px;
    }
    @keyframes floatApp {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    /* Download CTA */
    .download-section {
      max-width: 1200px; margin: 0 auto; padding: 0 20px 60px;
    }
    .download-card {
      border-radius: 20px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(13,38,62,0.7), rgba(10,31,46,0.85));
      box-shadow: 0 18px 44px rgba(3,10,20,0.45);
      padding: 40px; text-align: center;
      position: relative; overflow: hidden;
    }
    .download-card::after {
      content: ''; position: absolute; left: 5%; right: 5%; top: 0; height: 1px;
      background: linear-gradient(90deg, rgba(34,211,238,0), rgba(34,211,238,0.45), rgba(0,230,118,0.48), rgba(34,211,238,0));
      pointer-events: none;
    }
    .download-btn {
      display: inline-flex; align-items: center; gap: 12px;
      padding: 18px 40px; border-radius: 18px;
      background: var(--emerald); color: var(--night);
      font-size: 18px; font-weight: 700; text-decoration: none;
      box-shadow: 0 0 0 1px rgba(0,230,118,0.24), 0 16px 36px rgba(0,230,118,0.32);
      transition: transform 300ms, box-shadow 300ms;
    }
    .download-btn:hover {
      transform: scale(1.04);
      box-shadow: 0 0 0 1px rgba(0,230,118,0.36), 0 22px 44px rgba(0,230,118,0.42);
    }
    .download-btn svg { width: 28px; height: 28px; }
    .version-info {
      margin-top: 16px; font-size: 13px; color: var(--muted);
    }
    .version-info span { color: var(--emerald); font-weight: 600; }
    .changelog {
      margin-top: 20px; text-align: left; display: inline-block;
      background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 24px; max-width: 500px;
    }
    .changelog h4 { font-size: 13px; color: var(--gold); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.1em; }
    .changelog ul { list-style: none; padding: 0; }
    .changelog li { font-size: 13px; color: var(--muted); padding: 3px 0; }
    .changelog li::before { content: '✦ '; color: var(--emerald); }

    /* Instructions */
    .instructions {
      max-width: 1200px; margin: 0 auto; padding: 0 20px 60px;
    }
    .instructions h2 {
      font-size: 24px; font-weight: 800; margin-bottom: 24px;
      color: #fff;
    }
    .steps-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
    }
    .step-card {
      border-radius: 18px; border: 1px solid var(--border);
      background: rgba(8,26,40,0.6); padding: 24px;
      box-shadow: 0 16px 36px rgba(3,10,20,0.38);
      transition: transform 300ms, box-shadow 300ms;
    }
    .step-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 42px rgba(3,10,20,0.5);
    }
    .step-num {
      width: 40px; height: 40px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 800;
      background: linear-gradient(165deg, rgba(0,230,118,0.2), rgba(34,211,238,0.18));
      color: #ecfffb;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
    }
    .step-card h3 { margin-top: 12px; font-size: 15px; font-weight: 600; color: #fff; }
    .step-card p { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.6; }

    /* Requirements */
    .requirements {
      max-width: 1200px; margin: 0 auto; padding: 0 20px 60px;
    }
    .req-card {
      border-radius: 18px; border: 1px solid var(--border);
      background: linear-gradient(165deg, rgba(14,43,67,0.7), rgba(8,26,40,0.85));
      padding: 32px; box-shadow: 0 16px 36px rgba(3,10,20,0.38);
    }
    .req-card h2 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 16px; }
    .req-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
    }
    .req-item {
      background: rgba(255,255,255,0.04); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px; text-align: center;
    }
    .req-item .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }
    .req-item .value { font-size: 18px; font-weight: 700; color: #fff; margin-top: 4px; }

    /* Notice */
    .notice {
      max-width: 1200px; margin: 0 auto; padding: 0 20px 60px;
    }
    .notice-card {
      border-radius: 16px;
      border: 1px solid rgba(201,162,39,0.25);
      background: rgba(201,162,39,0.06);
      padding: 24px 28px;
      display: flex; gap: 14px; align-items: flex-start;
    }
    .notice-card .icon { font-size: 22px; flex-shrink: 0; }
    .notice-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }
    .notice-card strong { color: var(--gold); }

    /* Footer */
    .footer {
      border-top: 1px solid var(--border);
      background: linear-gradient(180deg, #071722, #050f18);
      padding: 32px 20px;
    }
    .footer-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
    }
    .footer-brand { font-size: 13px; font-weight: 600; color: #fff; }
    .footer-links { display: flex; gap: 16px; }
    .footer-links a { color: var(--muted); font-size: 12px; text-decoration: none; transition: color 200ms; }
    .footer-links a:hover { color: var(--emerald); }
    .footer-copy { width: 100%; font-size: 11px; color: var(--muted); margin-top: 8px; }

    /* Responsive */
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .hamburger { display: block; }
      .nav-links.open {
        display: flex; flex-direction: column;
        position: absolute; top: 54px; left: 0; right: 0;
        background: rgba(10,31,46,0.96); backdrop-filter: blur(16px);
        padding: 16px 20px; gap: 12px;
        border-bottom: 1px solid var(--border);
      }
      .hero { gap: 32px; padding: 40px 20px; }
      .hero-visual { flex: 0 0 180px; }
      .logo-showcase { width: 160px; height: 160px; border-radius: 28px; }
      .logo-showcase img { width: 130px; height: 130px; }
      .download-card { padding: 28px 20px; }
      .download-btn { padding: 14px 28px; font-size: 16px; }
    }
  </style>
</head>
<body>
  <!-- Navbar -->
  <div style="position:sticky; top:0; z-index:40; border-bottom:1px solid rgba(255,255,255,0.1); background:rgba(10,31,46,0.85); backdrop-filter:blur(16px);">
    <nav class="navbar">
      <a href="/frontend/site/" class="brand"><span class="dot"></span> BIT ALCER WALLET</a>
      <div class="nav-links" id="navMenu">
        <a href="/frontend/site/">Inicio</a>
        <a href="/frontend/site/precios.html">Precios</a>
        <a href="/frontend/site/bitcoin.html">Bitcoin</a>
        <a href="/frontend/site/educacion.html">Educación</a>
        <a href="/frontend/site/contacto.html">Contacto</a>
      </div>
      <div style="display:flex; align-items:center; gap:10px;">
        <a class="nav-cta" href="/frontend/wallet/login.html">Entrar wallet</a>
        <button class="hamburger" id="menuToggle" aria-label="Menú">☰</button>
      </div>
    </nav>
  </div>

  <!-- Hero -->
  <section class="hero">
    <div class="hero-content">
      <span class="hero-badge">📲 App oficial para Android</span>
      <h1>Descarga BitALCER Wallet</h1>
      <p>Tu wallet digital para Guatemala. Gestiona saldos en GTQ y USD, realiza recargas, retiros y conversiones cripto desde tu teléfono con seguridad institucional.</p>
    </div>
    <div class="hero-visual">
      <div class="logo-showcase">
        <img src="/frontend/site/assets/logo-alcer.jpeg" alt="BitALCER Wallet logo" id="appLogo">
      </div>
    </div>
  </section>

  <!-- Download CTA -->
  <section class="download-section">
    <div class="download-card">
      <a href="/frontend/site/downloads/bitalcer-wallet.apk" class="download-btn" id="btnDownload">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="7 10 12 15 17 10"/>
          <line x1="12" y1="15" x2="12" y2="3"/>
        </svg>
        Descargar APK para Android
      </a>
      <div class="version-info">
        Versión <span id="appVersion">...</span> · <span id="appSize">...</span> · Actualizado <span id="appDate">...</span>
      </div>
      <div class="changelog" id="changelogBox" style="display:none;">
        <h4>Novedades</h4>
        <ul id="changelogList"></ul>
      </div>
    </div>
  </section>

  <!-- Installation Steps -->
  <section class="instructions">
    <h2>Cómo instalar la app</h2>
    <div class="steps-grid">
      <div class="step-card">
        <span class="step-num">1</span>
        <h3>Descarga el archivo</h3>
        <p>Toca el botón verde de arriba. El archivo <strong>bitalcer-wallet.apk</strong> se descargará en tu teléfono.</p>
      </div>
      <div class="step-card">
        <span class="step-num">2</span>
        <h3>Permite la instalación</h3>
        <p>Android te pedirá permiso para instalar apps desde esta fuente. Ve a <strong>Ajustes → Seguridad → Fuentes desconocidas</strong> y actívalo para tu navegador.</p>
      </div>
      <div class="step-card">
        <span class="step-num">3</span>
        <h3>Instala y abre</h3>
        <p>Toca el archivo descargado y presiona <strong>"Instalar"</strong>. Una vez instalada, abre BitALCER Wallet y crea tu cuenta o inicia sesión.</p>
      </div>
      <div class="step-card">
        <span class="step-num">4</span>
        <h3>Verifica tu identidad</h3>
        <p>Completa el proceso de <strong>KYC</strong> para habilitar todas las funciones: recargas, retiros, conversiones y más.</p>
      </div>
    </div>
  </section>

  <!-- Requirements -->
  <section class="requirements">
    <div class="req-card">
      <h2>Requisitos mínimos</h2>
      <div class="req-grid">
        <div class="req-item">
          <div class="label">Sistema</div>
          <div class="value">Android 8.0+</div>
        </div>
        <div class="req-item">
          <div class="label">Espacio</div>
          <div class="value" id="reqSize">~36 MB</div>
        </div>
        <div class="req-item">
          <div class="label">Conexión</div>
          <div class="value">Internet</div>
        </div>
        <div class="req-item">
          <div class="label">Cámara</div>
          <div class="value">Recomendada</div>
        </div>
      </div>
    </div>
  </section>

  <!-- Notice -->
  <section class="notice">
    <div class="notice-card">
      <div class="icon">⚠️</div>
      <div>
        <p>
          <strong>Descarga solo desde bitalcer.com.</strong>
          Nunca instales el APK desde enlaces no oficiales o mensajes de terceros. BitALCER Wallet nunca te pedirá tu contraseña por correo, chat o llamada.
        </p>
        <p style="margin-top:8px;">
          <strong>Próximamente en Google Play.</strong>
          Estamos en proceso de publicación en la tienda oficial de Google. Mientras tanto, esta es la única fuente oficial de descarga.
        </p>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-inner">
      <span class="footer-brand">BitALCER Wallet</span>
      <div class="footer-links">
        <a href="/frontend/site/">Inicio</a>
        <a href="/frontend/site/terminos-y-condiciones.html">Términos</a>
        <a href="/frontend/site/contacto.html">Contacto</a>
        <a href="/frontend/wallet/login.html">Entrar wallet</a>
      </div>
      <p class="footer-copy">© 2026 Bit ALCER. Plataforma digital orientada a cumplimiento y transparencia operativa en Guatemala.</p>
    </div>
  </footer>

  <script>
    // Hamburger toggle
    document.getElementById('menuToggle')?.addEventListener('click', () => {
      document.getElementById('navMenu')?.classList.toggle('open');
    });

    // Load version info
    (async function () {
      try {
        const res = await fetch('/frontend/site/downloads/version.json', { cache: 'no-store' });
        if (!res.ok) return;
        const v = await res.json();
        const verEl = document.getElementById('appVersion');
        const sizeEl = document.getElementById('appSize');
        const dateEl = document.getElementById('appDate');
        const reqSize = document.getElementById('reqSize');

        if (verEl) verEl.textContent = v.latestVersion || v.version || '—';
        if (sizeEl) sizeEl.textContent = v.size || '~63 MB';

        // Format releaseDate (YYYY-MM-DD) to Spanish
        var dateStr = v.releaseDate || v.date || '';
        if (dateStr) {
          var meses = ['enero','febrero','marzo','abril','mayo','junio','julio','agosto','septiembre','octubre','noviembre','diciembre'];
          var parts = dateStr.split('-');
          if (parts.length === 3) {
            dateStr = parseInt(parts[2]) + ' de ' + meses[parseInt(parts[1])-1] + ' de ' + parts[0];
          }
        }
        if (dateEl) dateEl.textContent = dateStr || '—';
        if (reqSize && v.size) reqSize.textContent = v.size;

        if (v.changelog && v.changelog.length > 0) {
          var box = document.getElementById('changelogBox');
          var list = document.getElementById('changelogList');
          if (box && list) {
            box.style.display = 'inline-block';
            list.innerHTML = v.changelog.map(function(c) { return '<li>' + c.replace(/</g, '&lt;') + '</li>'; }).join('');
          }
        }
      } catch (_) { /* silent */ }
    })();
  </script>
</body>
</html>