description = "Galeria de screenshots — pantalla parrilla, caja, corte, admin"
==
<section id="screens" class="py-5 py-md-6 bg-light">
  <div class="container">
    <div class="text-center mb-5">
      <p class="eyebrow eyebrow-blue mb-2">Galeria</p>
      <h2 class="display-5 fw-bold mb-2">Mira VivesPOS en accion</h2>
      <p class="lead text-muted">Diseniado para velocidad. Cada pixel optimizado para el dia a dia del cajero.</p>
    </div>
    <div class="row g-4">
      <div class="col-md-6">
        <div class="vp-screenshot">
          <div class="bg-dark p-4" style="min-height:280px;">
            <div class="d-flex gap-2 mb-3">
              <span class="vp-key-badge">F1</span><span class="text-light small">Buscar producto</span>
              <span class="vp-key-badge ms-2">F5</span><span class="text-light small">Cobrar</span>
            </div>
            <div class="bg-white rounded p-3">
              <div class="d-flex justify-content-between border-bottom pb-2 mb-2">
                <span class="fw-bold small">Cliente: Mostrador</span>
                <span class="text-muted small">Vendedor: Admin</span>
              </div>
              <table class="table table-sm table-borderless">
                <thead><tr><th>Cant</th><th>Descripcion</th><th class="text-end">Precio</th><th class="text-end">Importe</th></tr></thead>
                <tbody>
                  <tr><td>2</td><td>Coca-Cola 600ml</td><td class="text-end">$18.00</td><td class="text-end">$36.00</td></tr>
                  <tr><td>1</td><td>Sabritas Original</td><td class="text-end">$22.00</td><td class="text-end">$22.00</td></tr>
                  <tr><td>3</td><td>Agua Ciel 1L</td><td class="text-end">$15.00</td><td class="text-end">$45.00</td></tr>
                </tbody>
              </table>
              <div class="d-flex justify-content-between fw-bold pt-2 border-top">
                <span>TOTAL:</span><span style="color:var(--vp-brand); font-size:1.4rem;">$103.00 MXN</span>
              </div>
            </div>
          </div>
        </div>
        <p class="text-center text-muted small mt-2">Pantalla Parrilla — scan, cantidades, totales en tiempo real</p>
      </div>
      <div class="col-md-6">
        <div class="vp-screenshot">
          <div class="bg-white p-4" style="min-height:280px;">
            <h4 class="fw-bold mb-3"><i class="bi-cash-coin text-brand me-2"></i>Cobro — Efectivo</h4>
            <div class="row g-3">
              <div class="col-6"><div class="bg-light rounded p-3 text-center"><p class="text-muted small mb-1">Total a pagar</p><p class="fw-bold fs-3 text-brand mb-0">$103.00</p></div></div>
              <div class="col-6"><div class="bg-light rounded p-3 text-center"><p class="text-muted small mb-1">Efectivo recibido</p><p class="fw-bold fs-3 mb-0">$200.00</p></div></div>
              <div class="col-12"><div class="bg-success bg-opacity-10 rounded p-3 text-center"><p class="text-success small mb-1">Cambio a entregar</p><p class="fw-bold fs-2 text-success mb-0">$97.00</p></div></div>
              <div class="col-12"><button class="btn btn-brand-cta w-100 py-2" disabled>Enter — Confirmar pago</button></div>
            </div>
          </div>
        </div>
        <p class="text-center text-muted small mt-2">Cobro — efectivo, tarjeta o mixto, cambio automatico</p>
      </div>
      <div class="col-md-6">
        <div class="vp-screenshot">
          <div class="bg-white p-4" style="min-height:280px;">
            <h4 class="fw-bold mb-3"><i class="bi-clipboard-data text-brand me-2"></i>Corte Z — Resumen del dia</h4>
            <div class="row g-2">
              <div class="col-6"><div class="border rounded p-2"><p class="text-muted small mb-0">Ventas totales</p><p class="fw-bold fs-5 mb-0">$4,287.00</p></div></div>
              <div class="col-6"><div class="border rounded p-2"><p class="text-muted small mb-0">Tickets emitidos</p><p class="fw-bold fs-5 mb-0">47</p></div></div>
              <div class="col-6"><div class="border rounded p-2"><p class="text-muted small mb-0">Efectivo en caja</p><p class="fw-bold fs-5 mb-0">$3,150.00</p></div></div>
              <div class="col-6"><div class="border rounded p-2"><p class="text-muted small mb-0">Pagos con tarjeta</p><p class="fw-bold fs-5 mb-0">$1,137.00</p></div></div>
              <div class="col-12"><div class="border rounded p-2"><p class="text-muted small mb-0">Producto top: Coca-Cola 600ml (18 unidades)</p></div></div>
            </div>
          </div>
        </div>
        <p class="text-center text-muted small mt-2">Corte Z — reporte completo de ventas del dia</p>
      </div>
      <div class="col-md-6">
        <div class="vp-screenshot">
          <div class="bg-white p-4" style="min-height:280px;">
            <h4 class="fw-bold mb-3"><i class="bi-box-seam text-brand me-2"></i>Admin de Productos</h4>
            <div class="table-responsive">
              <table class="table table-sm table-hover">
                <thead><tr><th>Nombre</th><th>Barcode</th><th class="text-end">Precio</th><th class="text-end">Stock</th></tr></thead>
                <tbody>
                  <tr><td>Coca-Cola 600ml</td><td>75010304136</td><td class="text-end">$18.00</td><td class="text-end">48</td></tr>
                  <tr><td>Sabritas Original</td><td>75010000344</td><td class="text-end">$22.00</td><td class="text-end">12</td></tr>
                  <tr><td>Agua Ciel 1L</td><td>75010554460</td><td class="text-end">$15.00</td><td class="text-end text-danger">3 ⚠</td></tr>
                  <tr><td>Maruchan Pollo</td><td>75010553312</td><td class="text-end">$25.00</td><td class="text-end">30</td></tr>
                </tbody>
              </table>
            </div>
            <p class="text-muted small mb-0"><i class="bi-exclamation-triangle text-warning"></i> Alerta de stock minimo en Agua Ciel 1L</p>
          </div>
        </div>
        <p class="text-center text-muted small mt-2">Admin — productos, barcodes, stock con alertas automaticas</p>
      </div>
    </div>
  </div>
</section>