description = "Modos: Offline vs Nube — toggle interactivo"
==
<section id="modos" class="py-5 py-md-6">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow eyebrow-violet mb-2">Dos modos de trabajar</p>
      <h2 class="display-5 fw-bold mb-2">Offline o con la nube &mdash; tu decides</h2>
      <p class="lead text-muted">Empieza offline hoy. Conecta con la nube cuando lo necesites. Sin migraciones, sin perdida de datos.</p>
    </div>
    <div class="vp-mode-toggle">
      <button class="vp-mode-btn active" id="modeOffline" onclick="vpShowMode('offline')">📍 Solo Offline</button>
      <button class="vp-mode-btn" id="modeCloud" onclick="vpShowMode('cloud')">☁️ Con Sincronizacion Nube</button>
    </div>
    <div id="modeContentOffline" class="vp-mode-detail">
      <div class="row g-4 align-items-center">
        <div class="col-lg-6">
          <div class="vp-mode-card card border-0 shadow-sm rounded-4 p-4 h-100">
            <h3 class="h4 fw-bold mb-3"><i class="bi-wifi-off text-brand me-2"></i>Modo Offline</h3>
            <p class="text-muted">VivesPOS funciona 100% local. Ideal para una sola tienda o puesto.</p>
            <ul class="list-unstyled">
              <li class="mb-3 d-flex gap-2"><i class="bi-check2-circle text-success fs-5"></i><span><strong>Vende sin internet.</strong> Tu POS nunca se detiene.</span></li>
              <li class="mb-3 d-flex gap-2"><i class="bi-check2-circle text-success fs-5"></i><span><strong>Datos locales.</strong> SQLite en tu maquina, backups manuales.</span></li>
              <li class="mb-3 d-flex gap-2"><i class="bi-check2-circle text-success fs-5"></i><span><strong>Cero costo recurrente.</strong> Sin servidores, sin suscripcion.</span></li>
              <li class="mb-3 d-flex gap-2"><i class="bi-check2-circle text-success fs-5"></i><span><strong>Privacidad total.</strong> Nada sale de tu equipo.</span></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="vp-screenshot bg-light rounded-4 d-flex align-items-center justify-content-center" style="min-height:300px;">
            <div class="text-center p-4">
              <i class="bi-laptop" style="font-size:4rem; color:var(--vp-brand);"></i>
              <p class="fw-bold mt-3 mb-1">Tu computadora = tu POS</p>
              <p class="text-muted small mb-0">Windows 10/11 o Linux<br>4GB RAM minimo<br>Sin internet requerido</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="modeContentCloud" class="vp-mode-detail" style="display:none;">
      <div class="row g-4 align-items-center">
        <div class="col-lg-6">
          <div class="vp-mode-card card border-0 shadow-sm rounded-4 p-4 h-100" style="border:2px solid var(--vp-brand);">
            <h3 class="h4 fw-bold mb-3"><i class="bi-cloud-check text-brand me-2"></i>Sincronizacion con la Nube</h3>
            <p class="text-muted">Conecta multiples cajas o sincroniza con tu sistema central cuando haya internet.</p>
            <ul class="list-unstyled">
              <li class="mb-3 d-flex gap-2"><i class="bi-check2-circle text-success fs-5"></i><span><strong>Sincronizacion automatica.</strong> Las ventas se suben en segundo plano.</span></li>
              <li class="mb-3 d-flex gap-2"><i class="bi-check2-circle text-success fs-5"></i><span><strong>Multi-caja.</strong> Conecta varias terminales a un punto central.</span></li>
              <li class="mb-3 d-flex gap-2"><i class="bi-check2-circle text-success fs-5"></i><span><strong>Resiliente.</strong> Si se cae internet, sigues vendiendo. Se sincroniza al volver.</span></li>
              <li class="mb-3 d-flex gap-2"><i class="bi-check2-circle text-success fs-5"></i><span><strong>Facturacion global.</strong> Genera facturas del dia automaticamente.</span></li>
            </ul>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="vp-screenshot bg-light rounded-4 d-flex align-items-center justify-content-center" style="min-height:300px;">
            <div class="text-center p-4">
              <i class="bi-diagram-3" style="font-size:4rem; color:var(--vp-brand);"></i>
              <p class="fw-bold mt-3 mb-1">Multiples cajas + nube</p>
              <p class="text-muted small mb-0">Sincronizacion en segundo plano<br>Transactional outbox<br>Retry automatico<br>Idempotencia garantizada</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script>
function vpShowMode(mode) {
  document.getElementById('modeContentOffline').style.display = mode === 'offline' ? 'block' : 'none';
  document.getElementById('modeContentCloud').style.display = mode === 'cloud' ? 'block' : 'none';
  document.getElementById('modeOffline').classList.toggle('active', mode === 'offline');
  document.getElementById('modeCloud').classList.toggle('active', mode === 'cloud');
}
</script>