<!--
=======================================================================
  TM SYSTEMS — Ofertas y Remates
  © 2025 TM Systems · www.tmsystems.mx
=======================================================================
  VERSIÓN ACTUAL: 1.4
  FECHA:          2026-06-10
  DESARROLLADO:   Claude Code (Anthropic) · PM Devs

-----------------------------------------------------------------------
  BITÁCORA DE VERSIONES
-----------------------------------------------------------------------

  v1.4 — 2026-06-10  [ COMPARATIVA DE PRECIOS ML vs DIRECTO ]
  ─────────────────────────────────────────────────────
  ✓ Campo precio_ml en productos.json
  ✓ Card muestra "En ML $X,XXX" tachado + "Precio directo" + ahorro
  ✓ Admin: campo "Precio en Mercado Libre" por producto
  ✓ Fix: filterProducts(cat, null) ya no rompe el render
  ─────────────────────────────────────────────────────

  v1.3 — 2026-06-10  [ ADMIN + PRODUCTOS DINÁMICOS ]
  ─────────────────────────────────────────────────────
  ✓ Productos renderizados dinámicamente desde data/productos.json
  ✓ Panel admin: agregar, editar, eliminar productos
  ✓ Subida de imágenes via admin (img/productos/)
  ✓ Soporte para marcar productos como no disponibles
  ─────────────────────────────────────────────────────

  v1.2 — 2026-06-06  [ FIX BARRA BLANCA AL HACER SCROLL ]
  ─────────────────────────────────────────────────────────
  ✓ body { padding-top: 84px } — el contenido del documento
    inicia exactamente donde termina el nav fijo (sin traslape)
  ✓ Hero padding-top reducido de 120px a 40px — el body ya
    provee el clearance del nav; el hero solo añade respiro visual
  ─────────────────────────────────────────────────────────

  v1.1 — 2026-06-06  [ SINCRONIZACIÓN CON INDEX.HTML v1.1 ]
  ─────────────────────────────────────────────────────────
  ✓ Footer: estilo claro — fondo blanco, borde azul superior,
    textos y links en azul oscuro (#1B3A8C)
  ✓ Navbar logo: color azul (var(--blue-dark)), sin filtro de brillo
  ✓ nav.scrolled CSS: sombra adicional al superar 40px de scroll
  ✓ nav.scrolled JS: toggle de clase via window.addEventListener
  ✓ Paleta y tipografía alineadas con index.html (Exo 2 + Inter)
  ─────────────────────────────────────────────────────────

  v1.0 — 2026-06-06  [ VERSIÓN INICIAL ]
  ─────────────────────────────────────────
  · Galería de equipos en oferta/remate
  · Filtros por categoría (Laptops, PCs, Monitores, Accesorios, Redes)
  · CTA primario WhatsApp por producto (mensaje pre-llenado)
  · CTA secundario enlace a tienda Mercado Libre
  · 6 productos de ejemplo — reemplazar con equipos reales
  ─────────────────────────────────────────

  PENDIENTES PARA PRÓXIMAS VERSIONES:
  · Agregar fotos reales de productos (reemplazar placeholders)
  · Actualizar URL de tienda Mercado Libre con URL real de la cuenta

=======================================================================
-->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ofertas y Remates — Equipos con Descuento | TM Systems</title>
    <meta name="description" content="Equipos de cómputo y tecnología en remate y con descuento. Laptops, PCs, monitores, UPS y más. TM Systems CDMX.">

    <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@300;400;500;600;700;800;900&family=Exo+2:wght@400;600;700;800;900&display=swap" rel="stylesheet">

    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --blue-dark:   #1B3A8C;
            --blue-mid:    #2176AE;
            --blue-light:  #38BDF8;
            --blue-pale:   #EFF6FF;
            --orange:      #F97316;
            --orange-dark: #EA580C;
            --wa-green:    #25D366;
            --ml-blue:     #3483FA;
            --bg-light:    #F8FAFC;
            --text-dark:   #1E293B;
            --text-muted:  #64748B;
            --white:       #FFFFFF;
            --border:      rgba(27,58,140,0.1);
            --radius:      12px;
            --radius-lg:   20px;
            --transition:  0.3s ease;
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--text-dark);
            background: var(--white);
            line-height: 1.6;
            padding-top: 84px;
        }

        h1, h2, h3, h4 { font-family: 'Exo 2', sans-serif; }
        a { text-decoration: none; color: inherit; }

        .container {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ===================== NAVBAR ===================== */
        nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            padding: 18px 0;
            background: rgba(255,255,255,0.97);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 2px 24px rgba(27,58,140,0.08);
            transition: all 0.3s ease;
        }

        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .logo-isotipo-img {
            height: 48px;
            width: auto;
        }
        .logo-text-wrap { line-height: 1; }
        .logo-brand {
            font-family: 'Exo 2', sans-serif;
            font-size: 1.2rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            color: var(--blue-dark);
        }
        .logo-tagline {
            font-size: 0.56rem;
            color: var(--text-muted);
            letter-spacing: 0.07em;
            font-weight: 400;
            text-transform: uppercase;
            margin-top: 4px;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 32px;
            list-style: none;
        }
        .nav-links a {
            color: var(--text-dark);
            font-size: 0.88rem;
            font-weight: 500;
            transition: color var(--transition);
            position: relative;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 0;
            width: 0; height: 2px;
            background: var(--orange);
            transition: width var(--transition);
            border-radius: 2px;
        }
        .nav-links a:hover { color: var(--blue-dark); }
        .nav-links a:hover::after { width: 100%; }
        .nav-links a.active {
            color: var(--orange-dark);
            font-weight: 700;
        }
        .nav-links a.active::after { width: 100%; background: var(--orange); }

        .nav-cta {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: var(--wa-green);
            color: var(--white) !important;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 700 !important;
            transition: all var(--transition);
            font-size: 0.88rem;
        }
        .nav-cta::after { display: none !important; }
        .nav-cta:hover {
            background: #1fb854;
            transform: translateY(-1px);
            box-shadow: 0 4px 18px rgba(37,211,102,0.4);
        }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 4px;
            background: none;
            border: none;
        }
        .hamburger span {
            display: block;
            width: 24px; height: 2px;
            background: var(--text-dark);
            border-radius: 2px;
        }

        /* ===================== HERO BANNER ===================== */
        .vitrina-hero {
            padding: 40px 0 60px;
            background: var(--white);
            position: relative;
            overflow: hidden;
        }
        .vitrina-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(27,58,140,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(27,58,140,0.04) 1px, transparent 1px);
            background-size: 64px 64px;
        }
        .vitrina-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 55% 70% at 95% 50%, rgba(249,115,22,0.06) 0%, transparent 65%),
                radial-gradient(ellipse 40% 60% at 0% 100%, rgba(27,58,140,0.05) 0%, transparent 60%);
        }
        .vitrina-hero-inner {
            position: relative;
            z-index: 1;
        }
        .vitrina-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(249,115,22,0.08);
            border: 1px solid rgba(249,115,22,0.2);
            color: var(--orange-dark);
            font-size: 0.82rem;
            font-weight: 600;
            padding: 7px 18px;
            border-radius: 100px;
            margin-bottom: 20px;
            letter-spacing: 0.03em;
        }
        .vitrina-badge span {
            width: 7px; height: 7px;
            background: var(--orange);
            border-radius: 50%;
            display: inline-block;
        }
        .vitrina-hero h1 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 900;
            color: var(--blue-dark);
            line-height: 1.2;
            margin-bottom: 14px;
            letter-spacing: -0.02em;
        }
        .vitrina-hero h1 em {
            color: var(--orange);
            font-style: normal;
        }
        .vitrina-hero p {
            color: var(--text-muted);
            font-size: 1.05rem;
            max-width: 600px;
            line-height: 1.75;
            margin-bottom: 28px;
        }
        .vitrina-note {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--blue-pale);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 18px;
            font-size: 0.85rem;
            color: var(--blue-dark);
        }
        .ml-trust {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            background: #fffbeb;
            border: 1.5px solid #fcd34d;
            border-radius: 10px;
            padding: 10px 18px;
            font-size: 0.82rem;
            color: #1a1a1a;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .ml-trust .ml-logo-badge {
            display: flex;
            align-items: center;
            gap: 7px;
            font-weight: 700;
            font-size: 0.84rem;
            white-space: nowrap;
        }
        .ml-trust .ml-divider {
            width: 1px;
            height: 28px;
            background: #fcd34d;
        }
        .ml-trust .ml-metrics {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }
        .ml-trust .ml-metric {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.8rem;
            color: #444;
            white-space: nowrap;
        }
        .ml-trust .ml-metric .dot-green {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
            flex-shrink: 0;
        }
        .ml-trust .ml-rep-bar {
            display: flex;
            gap: 3px;
            align-items: center;
        }
        .ml-trust .ml-rep-bar span {
            height: 7px;
            border-radius: 3px;
        }

        /* ===================== FILTERS ===================== */
        .vitrina-filters {
            padding: 28px 0 0;
        }
        .filter-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }
        .filter-label {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-right: 4px;
        }
        .filter-btn {
            padding: 7px 18px;
            border-radius: 100px;
            border: 1px solid var(--border);
            background: var(--white);
            color: var(--text-muted);
            font-size: 0.83rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition);
            font-family: 'Inter', sans-serif;
        }
        .filter-btn:hover,
        .filter-btn.active {
            background: var(--blue-dark);
            border-color: var(--blue-dark);
            color: var(--white);
        }

        /* ===================== PRODUCT GRID ===================== */
        .vitrina-section {
            padding: 40px 0 100px;
        }
        .section-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 32px;
            flex-wrap: wrap;
            gap: 12px;
        }
        .section-meta h2 {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text-dark);
        }
        .product-count {
            font-size: 0.83rem;
            color: var(--text-muted);
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
            gap: 24px;
        }

        .pcard {
            background: var(--white);
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--border);
            box-shadow: 0 2px 16px rgba(27,58,140,0.06);
            transition: transform var(--transition), box-shadow var(--transition);
            display: flex;
            flex-direction: column;
        }
        .pcard:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(27,58,140,0.13);
        }

        /* Product image area */
        .pcard-img {
            height: 200px;
            background: var(--blue-pale);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .pcard-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        .pcard:hover .pcard-img img { transform: scale(1.04); }

        /* Placeholder icon when no image */
        .pcard-img-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            opacity: 0.35;
        }
        .pcard-img-placeholder svg { color: var(--blue-dark); }
        .pcard-img-placeholder span {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--blue-dark);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        /* Badges */
        .badge-wrap {
            position: absolute;
            top: 12px;
            left: 12px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .badge {
            display: inline-block;
            padding: 4px 11px;
            border-radius: 100px;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .badge-remate  { background: var(--orange); color: var(--white); }
        .badge-oferta  { background: var(--blue-dark); color: var(--white); }
        .badge-nuevo   { background: #10B981; color: var(--white); }

        .badge-pct {
            position: absolute;
            top: 12px;
            right: 12px;
            background: var(--white);
            color: var(--orange-dark);
            font-weight: 900;
            font-size: 0.85rem;
            padding: 5px 10px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        }

        /* Card body */
        .pcard-body {
            padding: 22px 22px 0;
            flex: 1;
        }
        .pcard-cat {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.09em;
            color: var(--blue-mid);
            font-weight: 700;
            margin-bottom: 6px;
        }
        .pcard-name {
            font-size: 1.08rem;
            font-weight: 800;
            color: var(--text-dark);
            line-height: 1.3;
            margin-bottom: 12px;
        }
        .pcard-specs {
            list-style: none;
            margin-bottom: 16px;
        }
        .pcard-specs li {
            font-size: 0.83rem;
            color: var(--text-muted);
            padding: 3px 0;
            display: flex;
            gap: 7px;
            align-items: flex-start;
        }
        .pcard-specs li::before {
            content: '✓';
            color: var(--orange);
            font-weight: 800;
            font-size: 0.78rem;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .pcard-condition {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.75rem;
            color: var(--text-muted);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 3px 10px;
            margin-bottom: 14px;
        }

        /* Price */
        .pcard-price {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 3px;
            margin-bottom: 0;
        }
        .price-old {
            color: var(--text-muted);
            font-size: 0.88rem;
            text-decoration: line-through;
        }
        .price-new {
            color: var(--blue-dark);
            font-size: 1.55rem;
            font-weight: 900;
            font-family: 'Exo 2', sans-serif;
            line-height: 1;
        }
        .price-currency {
            font-size: 1rem;
            font-weight: 700;
        }
        .price-ml-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .price-ml-label {
            font-size: 0.68rem;
            background: #f0f2f5;
            color: var(--text-muted);
            padding: 1px 6px;
            border-radius: 3px;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .price-ml-amount {
            font-size: 0.85rem;
            color: var(--text-muted);
            text-decoration: line-through;
            font-family: 'Inter', sans-serif;
        }
        .price-direct-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .badge-direct {
            font-size: 0.63rem;
            background: var(--blue-dark);
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            white-space: nowrap;
            letter-spacing: 0.03em;
        }
        .price-savings {
            font-size: 0.75rem;
            color: #16a34a;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
        }

        /* Card actions */
        .pcard-footer {
            padding: 16px 22px 22px;
            display: flex;
            flex-direction: column;
            gap: 9px;
        }
        .btn-wa-card {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            background: var(--wa-green);
            color: var(--white);
            padding: 12px 20px;
            border-radius: 9px;
            font-weight: 700;
            font-size: 0.92rem;
            transition: all var(--transition);
            box-shadow: 0 4px 16px rgba(37,211,102,0.25);
        }
        .btn-wa-card:hover {
            background: #1fb854;
            transform: translateY(-1px);
            box-shadow: 0 6px 22px rgba(37,211,102,0.4);
        }
        .btn-ml {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 500;
            padding: 9px 16px;
            border: 1px solid var(--border);
            border-radius: 9px;
            transition: all var(--transition);
        }
        .btn-ml:hover {
            background: var(--ml-blue);
            border-color: var(--ml-blue);
            color: var(--white);
        }
        .ml-logo {
            font-weight: 800;
            font-size: 0.78rem;
            background: #FCD21C;
            color: #333;
            padding: 1px 6px;
            border-radius: 4px;
        }

        /* ===================== CTA STRIP ===================== */
        .cta-strip {
            background: var(--blue-dark);
            padding: 60px 0;
            text-align: center;
        }
        .cta-strip h2 {
            font-size: clamp(1.5rem, 3vw, 2.2rem);
            font-weight: 800;
            color: var(--white);
            margin-bottom: 12px;
        }
        .cta-strip p {
            color: rgba(255,255,255,0.65);
            margin-bottom: 28px;
            font-size: 1rem;
        }
        .cta-strip-actions {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .btn-cta-wa {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--wa-green);
            color: var(--white);
            padding: 15px 32px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 1rem;
            transition: all var(--transition);
            box-shadow: 0 6px 28px rgba(37,211,102,0.3);
        }
        .btn-cta-wa:hover {
            background: #1fb854;
            transform: translateY(-2px);
            box-shadow: 0 10px 36px rgba(37,211,102,0.45);
        }
        .btn-cta-ml {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--ml-blue);
            color: var(--white);
            padding: 15px 32px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 1rem;
            transition: all var(--transition);
        }
        .btn-cta-ml:hover {
            background: #1a6ee0;
            transform: translateY(-2px);
        }

        /* ===================== FOOTER ===================== */
        footer {
            background: var(--white);
            border-top: 3px solid var(--blue-dark);
            padding: 36px 0 20px;
        }
        .footer-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 24px;
        }
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .footer-logo img { height: 36px; }
        .footer-logo-text {
            font-family: 'Exo 2', sans-serif;
            font-weight: 800;
            font-size: 1rem;
            color: var(--blue-dark);
            letter-spacing: 0.05em;
        }
        .footer-links {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
        }
        .footer-links a {
            color: var(--text-muted);
            font-size: 0.85rem;
            transition: color var(--transition);
        }
        .footer-links a:hover { color: var(--blue-dark); }
        .footer-copy {
            text-align: center;
            color: var(--text-muted);
            font-size: 0.78rem;
            border-top: 1px solid rgba(27,58,140,0.1);
            padding-top: 18px;
        }

        /* ===================== FAB WHATSAPP ===================== */
        .fab-wa {
            position: fixed;
            bottom: 28px; right: 28px;
            width: 58px; height: 58px;
            background: var(--wa-green);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 28px rgba(37,211,102,0.4);
            z-index: 900;
            transition: all var(--transition);
        }
        .fab-wa:hover {
            background: #1fb854;
            transform: scale(1.08);
            box-shadow: 0 10px 36px rgba(37,211,102,0.55);
        }
        .fab-wa svg { color: var(--white); }

        /* ===================== RESPONSIVE ===================== */
        @media (max-width: 860px) {
            .nav-links { display: none; }
            .hamburger { display: flex; }
            .product-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
        }
        @media (max-width: 540px) {
            .product-grid { grid-template-columns: 1fr; }
            .cta-strip-actions { flex-direction: column; align-items: center; }
        }
        nav.scrolled { box-shadow: 0 4px 32px rgba(27,58,140,0.18); border-bottom-color: rgba(27,58,140,0.18); }
    </style>
</head>
<body>

<!-- ===================== NAVBAR ===================== -->
<nav>
    <div class="container nav-inner">
        <a href="index.html" class="nav-logo">
            <img src="img/logo-isotipo.png" alt="TM Systems" class="logo-isotipo-img">
            <div class="logo-text-wrap">
                <div class="logo-brand"><span style="color:var(--blue-dark)">TM</span> SYSTEMS</div>
                <div class="logo-tagline">Soluciones en Sistemas y Administración</div>
            </div>
        </a>

        <ul class="nav-links">
            <li><a href="index.html#servicios">Servicios</a></li>
            <li><a href="index.html#como-trabajamos">Proceso</a></li>
            <li><a href="index.html#nosotros">Nosotros</a></li>
            <li><a href="index.html#faq">FAQ</a></li>
            <li><a href="index.html#contacto">Contacto</a></li>
            <li><a href="/rastreo">Seguimiento Reparación</a></li>
            <li><a href="ofertas.html" class="active">Ofertas y Remates</a></li>
            <li>
                <a href="https://wa.me/525630280100?text=Hola%20TM%20Systems%2C%20vi%20sus%20ofertas%20y%20me%20interesa%20un%20equipo"
                   class="nav-cta" target="_blank" rel="noopener">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
                        <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>
                    WhatsApp
                </a>
            </li>
        </ul>

        <button class="hamburger" onclick="toggleMenu()" aria-label="Menú">
            <span></span><span></span><span></span>
        </button>
    </div>
</nav>

<!-- ===================== HERO BANNER ===================== -->
<section class="vitrina-hero">
    <div class="container vitrina-hero-inner">
        <div class="vitrina-badge">
            <span></span>
            Equipos verificados · Sin comisión de intermediarios
        </div>
        <h1>Equipos en <em>Oferta</em> y Remate</h1>
        <p>Laptops, PCs, servidores, monitores y periféricos con descuento. Todos revisados por nuestros técnicos. Compra directo con nosotros y ahorra.</p>
        <div class="vitrina-note">
            💬 Pregunta por cualquier equipo — respondemos por WhatsApp en minutos
        </div>
        <a class="ml-trust" href="https://listado.mercadolibre.com.mx/_CustId_134735" target="_blank" rel="noopener" style="text-decoration:none;">
            <div class="ml-logo-badge">
                <svg width="20" height="20" viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="32" fill="#FFE600"/><path d="M14 32c0-9.94 8.06-18 18-18s18 8.06 18 18" stroke="#3483FA" stroke-width="5" stroke-linecap="round"/><circle cx="22" cy="36" r="4" fill="#3483FA"/><circle cx="42" cy="36" r="4" fill="#3483FA"/></svg>
                TM SYSTEMS en ML · <strong style="color:#16a34a">Reputación verde</strong>
            </div>
            <div class="ml-rep-bar" title="Reputación Mercado Libre">
                <span style="width:18px;background:#f87171;opacity:.5"></span>
                <span style="width:18px;background:#fb923c;opacity:.5"></span>
                <span style="width:18px;background:#facc15;opacity:.5"></span>
                <span style="width:24px;background:#86efac;opacity:.7"></span>
                <span style="width:28px;background:#16a34a"></span>
            </div>
            <div class="ml-divider"></div>
            <div class="ml-metrics">
                <div class="ml-metric"><div class="dot-green"></div> Buena atención</div>
                <div class="ml-metric"><div class="dot-green"></div> Entrega a tiempo</div>
                <div class="ml-metric" style="color:var(--blue-dark);font-weight:600">Vendedor desde 1999 →</div>
            </div>
        </a>
    </div>
</section>

<!-- ===================== FILTERS ===================== -->
<div class="vitrina-filters">
    <div class="container">
        <div class="filter-row">
            <span class="filter-label">Filtrar:</span>
            <button class="filter-btn active" onclick="filterProducts('todos', this)">Todos</button>
            <button class="filter-btn" onclick="filterProducts('laptop', this)">Laptops</button>
            <button class="filter-btn" onclick="filterProducts('desktop', this)">PCs Escritorio</button>
            <button class="filter-btn" onclick="filterProducts('monitor', this)">Monitores</button>
            <button class="filter-btn" onclick="filterProducts('accesorio', this)">Accesorios / UPS</button>
            <button class="filter-btn" onclick="filterProducts('red', this)">Redes</button>
        </div>
    </div>
</div>

<!-- ===================== PRODUCT GRID ===================== -->
<section class="vitrina-section">
    <div class="container">
        <div class="section-meta">
            <h2>Equipos disponibles</h2>
            <span class="product-count" id="product-count">6 equipos</span>
        </div>

        <div class="product-grid" id="product-grid">
            <div class="prod-loading" style="grid-column:1/-1;text-align:center;padding:48px;color:var(--text-muted);font-size:0.95rem;">
                Cargando productos…
            </div>
        </div><!-- /product-grid -->
    </div><!-- /container -->
</section>

<!-- ===================== CTA STRIP ===================== -->
<section class="cta-strip">
    <div class="container">
        <h2>¿Buscas algo específico?</h2>
        <p>Tenemos más equipos en bodega. Cuéntanos qué necesitas y te cotizamos sin compromiso.</p>
        <div class="cta-strip-actions">
            <a href="https://wa.me/525630280100?text=Hola%20TM%20Systems%2C%20busco%20un%20equipo%20específico%2C%20%C2%BFme%20pueden%20ayudar%3F"
               class="btn-cta-wa" target="_blank" rel="noopener">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><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>
                Escribir por WhatsApp
            </a>
            <a href="https://listado.mercadolibre.com.mx/_CustId_134735"
               class="btn-cta-ml" target="_blank" rel="noopener">
                <span style="background:#FCD21C;color:#333;font-weight:800;padding:2px 8px;border-radius:4px;font-size:0.85rem;">ML</span>
                Ver tienda en Mercado Libre
            </a>
        </div>
    </div>
</section>

<!-- ===================== FOOTER ===================== -->
<footer>
    <div class="container">
        <div class="footer-inner">
            <a href="index.html" class="footer-logo">
                <img src="img/logo-isotipo.png" alt="TM Systems">
                <span class="footer-logo-text">TM SYSTEMS</span>
            </a>
            <nav class="footer-links">
                <a href="index.html">Inicio</a>
                <a href="index.html#servicios">Servicios</a>
                <a href="index.html#contacto">Contacto</a>
                <a href="ofertas.html">Ofertas y Remates</a>
                <a href="https://wa.me/525630280100" target="_blank">WhatsApp</a>
            </nav>
        </div>
        <p class="footer-copy">© 2025 TM Systems — Soluciones en Sistemas y Administración · Escandón II, CDMX &nbsp;·&nbsp; <span style="opacity:0.5; font-size:0.72rem;">v1.4</span></p>
    </div>
</footer>

<!-- FAB WhatsApp -->
<a href="https://wa.me/525630280100?text=Hola%20TM%20Systems%2C%20vi%20sus%20ofertas%20y%20me%20interesa%20un%20equipo"
   class="fab-wa" target="_blank" rel="noopener" aria-label="WhatsApp">
    <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
        <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>

<script>
    // ======== FILTER BY CATEGORY ========
    function filterProducts(cat, btn) {
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        if (btn) btn.classList.add('active');

        const cards = document.querySelectorAll('.pcard');
        let visible = 0;
        cards.forEach(card => {
            const show = cat === 'todos' || card.dataset.cat === cat;
            card.style.display = show ? 'flex' : 'none';
            if (show) visible++;
        });
        document.getElementById('product-count').textContent =
            visible + (visible === 1 ? ' equipo' : ' equipos');
    }

    // ======== HAMBURGER MENU ========
    function toggleMenu() {
        const links = document.querySelector('.nav-links');
        links.style.display = links.style.display === 'flex' ? 'none' : 'flex';
    }

    // NAVBAR SCROLLED
    window.addEventListener('scroll', () => {
        document.querySelector('nav').classList.toggle('scrolled', window.scrollY > 40);
    });

    // ======== CARGAR PRODUCTOS DESDE JSON ========
    const SVG_ICONS = {
        laptop:   `<div class="pcard-img-placeholder"><svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8m-4-4v4"/></svg><span>Laptop</span></div>`,
        desktop:  `<div class="pcard-img-placeholder"><svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8m-4-4v4M2 7h20"/></svg><span>PC Escritorio</span></div>`,
        monitor:  `<div class="pcard-img-placeholder"><svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="1" y="3" width="22" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg><span>Monitor</span></div>`,
        accesorio:`<div class="pcard-img-placeholder"><svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg><span>No-break / UPS</span></div>`,
        red:      `<div class="pcard-img-placeholder"><svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="1" y="8" width="22" height="8" rx="2"/><circle cx="6" cy="12" r="1.5"/><circle cx="10" cy="12" r="1.5"/><path d="M15 12h4"/></svg><span>Switch / Red</span></div>`
    };

    const WA_ICON = `<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><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>`;

    let currentFilter = 'todos';

    function fmtPrecio(n) {
        return Number(n).toLocaleString('es-MX');
    }

    function renderCard(p) {
        const cats = {laptop:'Laptop',desktop:'PC Escritorio',monitor:'Monitor',accesorio:'Accesorio/UPS',red:'Redes'};
        const badgeClass = p.badge === 'remate' ? 'badge-remate' : 'badge-oferta';
        const badgeTxt   = p.badge === 'remate' ? 'Remate' : 'Oferta';
        const waMsg = encodeURIComponent('Hola TM Systems, me interesa ' + p.nombre + '. ¿Está disponible?');
        const imgHTML = p.foto
            ? `<img src="${p.foto}" alt="${p.nombre}">`
            : (SVG_ICONS[p.categoria] || SVG_ICONS.laptop);
        const specsHTML = (p.specs || []).map(s => `<li>${s}</li>`).join('');
        const mlLink = p.link_ml || 'https://listado.mercadolibre.com.mx/_CustId_134735';
        const priceHTML = p.precio_ml > 0
            ? `<div class="price-ml-row">
                   <span class="price-ml-label">En ML</span>
                   <span class="price-ml-amount">$${fmtPrecio(p.precio_ml)}</span>
               </div>
               <div class="price-direct-row">
                   <span class="price-new"><span class="price-currency">$</span>${fmtPrecio(p.precio_venta)}</span>
                   <span class="badge-direct">Precio directo</span>
               </div>
               <div class="price-savings">Ahorras $${fmtPrecio(p.precio_ml - p.precio_venta)} comprando aquí</div>`
            : `<div class="price-direct-row">
                   <span class="price-old">$${fmtPrecio(p.precio_original)}</span>
                   <span class="price-new"><span class="price-currency">$</span>${fmtPrecio(p.precio_venta)}</span>
               </div>`;
        return `
        <div class="pcard" data-cat="${p.categoria}">
            <div class="pcard-img">
                ${imgHTML}
                <div class="badge-wrap"><span class="badge ${badgeClass}">${badgeTxt}</span></div>
                <div class="badge-pct">${p.descuento}% OFF</div>
            </div>
            <div class="pcard-body">
                <div class="pcard-cat">${cats[p.categoria] || p.categoria}</div>
                <div class="pcard-name">${p.nombre}</div>
                <div class="pcard-condition">${p.condicion}</div>
                <ul class="pcard-specs">${specsHTML}</ul>
                <div class="pcard-price">${priceHTML}</div>
            </div>
            <div class="pcard-footer">
                <a href="https://wa.me/525630280100?text=${waMsg}" class="btn-wa-card" target="_blank" rel="noopener">
                    ${WA_ICON} Preguntar por WhatsApp
                </a>
                <a href="${mlLink}" class="btn-ml" target="_blank" rel="noopener">
                    <span class="ml-logo">ML</span> Ver en Mercado Libre
                </a>
            </div>
        </div>`;
    }

    async function loadProductos() {
        const grid = document.getElementById('product-grid');
        try {
            const r = await fetch('data/productos.json?_=' + Date.now());
            if (!r.ok) throw new Error();
            const d = await r.json();
            const lista = (d.productos || []).filter(p => p.disponible !== false);
            if (lista.length === 0) {
                grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:48px;color:var(--text-muted)">Sin productos disponibles por el momento.</div>';
            } else {
                grid.innerHTML = lista.map(renderCard).join('');
            }
            filterProducts(currentFilter, null);
        } catch(e) {
            console.error('loadProductos error:', e);
            grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:48px;color:var(--text-muted)">No se pudieron cargar los productos. Intenta refrescar la página.</div>';
        }
    }

    loadProductos();
</script>

</body>
</html>