<!--
=======================================================================
  TM SYSTEMS — Sitio Web Corporativo
  © 2025 TM Systems · Escandón II, CDMX · 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  [ UBICACIÓN + MODALIDADES DE ATENCIÓN ]
  ─────────────────────────────────────────────────────
  ✓ Dirección actualizada a Sindicalismo 102, Col. Escandón II Sección, CP 11800
  ✓ Bloque de modalidades de atención: cita en instalaciones, recolección, mensajería/Uber
  ✓ FAQ: respuesta de horarios actualizada — solo previa cita por WhatsApp
  ✓ Mapa: zoom 16, centrado en Sindicalismo 102
  ✓ Footer: dirección actualizada
  ─────────────────────────────────────────────────────

  v1.3 — 2026-06-10  [ FIX TARJETAS DE SERVICIOS DINÁMICAS ]
  ─────────────────────────────────────────────────────
  ✓ IntersectionObserver re-registra las tarjetas de servicios
    después de inyectarlas vía fetch — antes quedaban en opacity:0
  ─────────────────────────────────────────────────────

  v1.2 — 2026-06-10  [ ADMIN + SERVICIOS DINÁMICOS ]
  ─────────────────────────────────────────────────────
  ✓ Cards de servicios renderizadas desde data/servicios.json
  ✓ Desde el admin se puede cambiar: foto, descripción,
    ícono, texto del enlace, video de YouTube por servicio
  ─────────────────────────────────────────────────────

  v1.1 — 2026-06-06  [ IMÁGENES + BOTONES + AJUSTES VISUALES ]
  ─────────────────────────────────────────────────────────────
  HERO:
  ✓ Imagen de fondo real: img/hero-bg.jpg (right center / cover)
  ✓ Gradiente overlay: blanco 88% izquierda → transparente derecha
    para visibilidad del texto sobre la foto
  ✓ Stats strip: fondo rgba(255,255,255,0.88) + backdrop-filter blur
  ✓ Botones reordenados:
      1. Solicita una consulta (naranja — CTA principal)
      2. Ver servicios (azul sólido #1B3A8C, texto blanco — nuevo)
      3. Escríbenos ahora (verde WhatsApp)

  SERVICIOS:
  ✓ 4 tarjetas con foto real a todo ancho (full-bleed):
      · Mantenimiento de Equipos  → img/srv-mantenimiento.png
      · Ciberseguridad Empresarial → img/srv-ciberseguridad.jpg
      · Diagnóstico Especializado  → img/srv-diagnostico.jpg
      · Licencias de Software      → img/srv-licencias.png
  ✓ Técnica CSS: position:absolute + clase has-img + padding-top:210px

  NOSOTROS:
  ✓ Foto real del equipo: img/nosotros.png (object-fit: cover)
  ─────────────────────────────────────────────────────────────

  v1.0 — 2026-06-06  [ VERSIÓN INICIAL ]
  ────────────────────────────────────────
  SECCIONES DEL SITIO:
  · Navbar fija con logo PNG real, efecto scroll, menú mobile responsive
  · Hero: título izquierda / botones de acción derecha, stats animados
    (30+ años, <2h respuesta, 24/7, 100% compromiso)
  · Servicios: tarjeta destacada "Soporte Empresarial" + 7 servicios adicionales
  · ¿Por qué TM?: 4 pilares diferenciadores con estadísticas
  · Cómo trabajamos: 3 pasos — Diagnóstico → Plan → Soporte continuo
  · Nosotros: Historia 1994-2005, misión, valores
  · FAQ: 8 preguntas frecuentes con acordeón interactivo
  · Contacto: botón WhatsApp, formulario→WhatsApp, mapa, 5 redes sociales
  · Footer: logo, links de navegación, copyright, badge de versión
  · FAB WhatsApp flotante con animación pulse

  PÁGINA ADICIONAL:
  · ofertas.html — Galería de equipos en oferta/remate
    Filtros por categoría, CTA WhatsApp por producto,
    enlace secundario a tienda Mercado Libre

  IDENTIDAD VISUAL:
  · Paleta: Blanco + Azul TM (#1B3A8C) + Naranja CTA (#F97316)
  · Verde WhatsApp (#25D366) exclusivo para botones WhatsApp
  · Fuentes: Exo 2 (headings/títulos) + Inter (cuerpo)
  · Logo PNG real (img/logo-isotipo.png)

  TECNOLOGÍA:
  · HTML5 + CSS3 + JavaScript Vanilla — sin frameworks ni dependencias
  · Google Fonts: Exo 2 + Inter
  · IntersectionObserver para animaciones de entrada (scroll reveal)
  · requestAnimationFrame para contadores animados
  · Formulario de contacto → genera mensaje pre-llenado en WhatsApp

  PENDIENTES PARA PRÓXIMAS VERSIONES:
  · Fotos reales de productos en ofertas.html
  · Actualizar URL de tienda Mercado Libre en ofertas.html
  · Asignar imágenes a tarjetas: Redes y Soporte Empresarial

=======================================================================
-->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TM Systems — Tecnología confiable para empresas que no pueden detenerse</title>
    <meta name="description" content="Soporte administrado, infraestructura TI, ciberseguridad y continuidad operativa para empresas y PYMES en CDMX. Más de 30 años de experiencia.">
    <meta name="keywords" content="soporte TI empresarial, mantenimiento sistemas, ciberseguridad, recuperación de datos, hosting empresarial, CDMX, TM Systems">
    <meta property="og:title" content="TM Systems — Tecnología confiable para empresas">
    <meta property="og:description" content="Soporte administrado, infraestructura TI y continuidad operativa. Desde 1994.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.tmsystems.mx">

    <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>
        /* =============================================
           VARIABLES & RESET
        ============================================= */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --blue-dark:    #1B3A8C;
            --blue-mid:     #2176AE;
            --blue-light:   #38BDF8;
            --blue-glow:    rgba(33, 118, 174, 0.3);
            --warm-gray:    #8B8080;
            --bg-darkest:   #080D1A;
            --bg-dark:      #0F172A;
            --bg-dark2:     #1E293B;
            --bg-light:     #F8FAFC;
            --text-dark:    #1E293B;
            --text-muted:   #64748B;
            --text-light:   #E2E8F0;
            --border-dark:  rgba(255,255,255,0.07);
            --white:        #FFFFFF;
            --wa-green:     #25D366;
            --transition:   0.3s ease;
            --radius:       12px;
            --radius-lg:    20px;
            --shadow-blue:  0 4px 24px rgba(33, 118, 174, 0.3);
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--text-dark);
            background: var(--white);
            overflow-x: hidden;
            line-height: 1.6;
        }

        h1, h2, h3, .logo-brand, .why-num, .hstat-num, .ab-num {
            font-family: 'Exo 2', 'Inter', sans-serif;
        }

        img { max-width: 100%; height: auto; display: block; }
        a { text-decoration: none; color: inherit; }

        /* =============================================
           UTILITIES
        ============================================= */
        .container {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 28px;
        }

        .section-tag {
            display: inline-block;
            background: rgba(33, 118, 174, 0.1);
            color: var(--blue-mid);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 6px 16px;
            border-radius: 100px;
            border: 1px solid rgba(33, 118, 174, 0.22);
            margin-bottom: 18px;
        }
        .section-tag.light {
            background: rgba(56, 189, 248, 0.1);
            color: var(--blue-light);
            border-color: rgba(56, 189, 248, 0.2);
        }

        /* Scroll reveal */
        .reveal, .reveal-l, .reveal-r {
            opacity: 0;
            transition: opacity 0.75s ease, transform 0.75s ease;
        }
        .reveal       { transform: translateY(32px); }
        .reveal-l     { transform: translateX(-32px); }
        .reveal-r     { transform: translateX(32px); }
        .reveal.vis, .reveal-l.vis, .reveal-r.vis {
            opacity: 1;
            transform: none;
        }
        .d1 { transition-delay: 0.1s; }
        .d2 { transition-delay: 0.2s; }
        .d3 { transition-delay: 0.3s; }
        .d4 { transition-delay: 0.4s; }

        /* =============================================
           NAVBAR
        ============================================= */
        nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            padding: 22px 0;
            transition: all 0.4s ease;
        }
        nav.scrolled {
            background: rgba(8, 13, 26, 0.96);
            backdrop-filter: blur(16px);
            padding: 14px 0;
            border-bottom: 1px solid var(--border-dark);
            box-shadow: 0 4px 40px rgba(0,0,0,0.4);
        }

        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .logo-isotipo-img {
            height: 52px;
            width: auto;
            filter: brightness(1.8) saturate(0.9);
        }

        .logo-text-wrap { line-height: 1; }
        .logo-brand {
            font-size: 1.3rem;
            font-weight: 800;
            letter-spacing: 0.06em;
        }
        .logo-brand .tm { color: #ffffff; }
        .logo-brand .sys { color: var(--blue-light); }
        .logo-tagline {
            font-size: 0.58rem;
            color: rgba(255,255,255,0.45);
            letter-spacing: 0.07em;
            font-weight: 400;
            text-transform: uppercase;
            margin-top: 4px;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 36px;
            list-style: none;
        }
        .nav-links a {
            color: rgba(255,255,255,0.75);
            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(--blue-light);
            transition: width var(--transition);
            border-radius: 2px;
        }
        .nav-links a:hover { color: var(--white); }
        .nav-links a:hover::after { width: 100%; }

        .nav-cta {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: var(--wa-green) !important;
            color: var(--white) !important;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 700 !important;
            transition: all var(--transition) !important;
        }
        .nav-cta::after { display: none !important; }
        .nav-cta:hover {
            background: #1fb854 !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 18px rgba(37,211,102,0.4) !important;
        }

        .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(--white);
            border-radius: 2px;
            transition: all 0.3s;
        }

        /* Mobile menu */
        .mobile-menu {
            display: none;
            position: fixed;
            inset: 0;
            background: var(--bg-darkest);
            z-index: 999;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 44px;
        }
        .mobile-menu.open { display: flex; }
        .mobile-menu a {
            color: var(--white);
            font-size: 2rem;
            font-weight: 700;
            transition: color var(--transition);
        }
        .mobile-menu a:hover { color: var(--blue-light); }
        .mobile-close {
            position: absolute;
            top: 24px; right: 28px;
            color: rgba(255,255,255,0.6);
            font-size: 2rem;
            cursor: pointer;
            background: none;
            border: none;
            line-height: 1;
        }

        /* =============================================
           HERO
        ============================================= */
        #inicio {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: var(--bg-darkest);
            overflow: hidden;
        }

        /* Subtle grid */
        #inicio::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(33,118,174,0.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(33,118,174,0.07) 1px, transparent 1px);
            background-size: 64px 64px;
        }
        /* Radial glows */
        #inicio::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 65% 55% at 80% 50%, rgba(27,58,140,0.22) 0%, transparent 70%),
                radial-gradient(ellipse 45% 65% at -5% 100%, rgba(33,118,174,0.13) 0%, transparent 60%);
        }

        /* If you have a hero background photo, uncomment and update the path:
        #inicio {
            background: url('img/hero-bg.jpg') center/cover no-repeat;
        }
        #inicio::before {
            background: linear-gradient(to right, rgba(8,13,26,0.93) 45%, rgba(8,13,26,0.55));
        }
        */

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 760px;
            padding: 120px 0 200px;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: rgba(33,118,174,0.13);
            border: 1px solid rgba(56,189,248,0.22);
            color: var(--blue-light);
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 8px 20px;
            border-radius: 100px;
            margin-bottom: 32px;
        }
        .hero-badge-dot {
            width: 8px; height: 8px;
            background: var(--blue-light);
            border-radius: 50%;
            animation: blink 2.2s ease infinite;
        }
        @keyframes blink {
            0%,100% { opacity: 1; }
            50%      { opacity: 0.3; }
        }

        .hero-title {
            font-size: clamp(2.4rem, 5.5vw, 4rem);
            font-weight: 900;
            color: var(--white);
            line-height: 1.08;
            margin-bottom: 24px;
            letter-spacing: -0.02em;
        }
        .hero-title .accent {
            background: linear-gradient(130deg, var(--blue-light) 0%, var(--blue-mid) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-sub {
            font-size: clamp(1rem, 1.8vw, 1.15rem);
            color: rgba(255,255,255,0.6);
            max-width: 600px;
            margin-bottom: 44px;
            line-height: 1.75;
        }

        .hero-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--blue-mid);
            color: var(--white);
            padding: 16px 30px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.95rem;
            transition: all var(--transition);
            box-shadow: 0 4px 24px rgba(33,118,174,0.35);
        }
        .btn-primary:hover {
            background: var(--blue-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 32px rgba(33,118,174,0.5);
        }

        .btn-wa {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--wa-green);
            color: var(--white);
            padding: 16px 30px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.95rem;
            transition: all var(--transition);
            box-shadow: 0 4px 20px rgba(37,211,102,0.28);
        }
        .btn-wa:hover {
            background: #1fb854;
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(37,211,102,0.45);
        }

        .btn-outline {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            color: rgba(255,255,255,0.75);
            padding: 16px 30px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.95rem;
            border: 1px solid rgba(255,255,255,0.18);
            transition: all var(--transition);
        }
        .btn-outline:hover {
            background: rgba(255,255,255,0.06);
            color: var(--white);
            border-color: rgba(255,255,255,0.35);
        }

        /* Hero stats bar */
        .hero-stats {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            z-index: 2;
            border-top: 1px solid var(--border-dark);
            background: rgba(255,255,255,0.03);
            backdrop-filter: blur(8px);
        }
        .hero-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 28px;
        }
        .hstat {
            padding: 22px 16px;
            text-align: center;
            border-right: 1px solid var(--border-dark);
        }
        .hstat:last-child { border-right: none; }
        .hstat-num {
            font-size: 2rem;
            font-weight: 900;
            color: var(--white);
            line-height: 1;
        }
        .hstat-num em {
            color: var(--blue-light);
            font-style: normal;
        }
        .hstat-lbl {
            font-size: 0.7rem;
            color: rgba(255,255,255,0.45);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-top: 5px;
        }

        /* =============================================
           SERVICES
        ============================================= */
        #servicios {
            padding: 100px 0;
            background: var(--bg-light);
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        .section-header h2 {
            font-size: clamp(1.8rem, 3.5vw, 2.7rem);
            font-weight: 800;
            color: var(--text-dark);
            line-height: 1.2;
            margin-bottom: 14px;
        }
        .section-header p {
            color: var(--text-muted);
            font-size: 1.03rem;
            max-width: 520px;
            margin: 0 auto;
        }

        /* Featured card */
        .service-featured {
            background: linear-gradient(135deg, var(--blue-dark) 0%, #1a5f9e 100%);
            border-radius: var(--radius-lg);
            padding: 44px 48px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: center;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
            transition: transform var(--transition), box-shadow var(--transition);
        }
        .service-featured::before {
            content: '';
            position: absolute;
            top: -40%; right: -10%;
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 65%);
            pointer-events: none;
        }
        .service-featured:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 56px rgba(27,58,140,0.45);
        }

        .sf-icon {
            font-size: 2.6rem;
            margin-bottom: 18px;
            display: block;
        }
        .service-featured h3 {
            font-size: 1.7rem;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 14px;
            letter-spacing: -0.01em;
        }
        .service-featured > div:first-child p {
            color: rgba(255,255,255,0.72);
            font-size: 0.97rem;
            line-height: 1.75;
        }

        .sf-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 28px;
        }
        .sf-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255,255,255,0.82);
            font-size: 0.9rem;
        }
        .sf-list li::before {
            content: '';
            width: 6px; height: 6px;
            background: var(--blue-light);
            border-radius: 50%;
            flex-shrink: 0;
        }
        .sf-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.13);
            color: var(--white);
            padding: 13px 24px;
            border-radius: 9px;
            font-weight: 700;
            font-size: 0.9rem;
            border: 1px solid rgba(255,255,255,0.18);
            transition: all var(--transition);
        }
        .sf-cta:hover {
            background: rgba(255,255,255,0.22);
        }

        /* Regular service cards grid */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }
        .services-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .scard {
            background: var(--white);
            border: 1px solid #E2E8F0;
            border-radius: var(--radius-lg);
            padding: 32px 28px;
            transition: all var(--transition);
            position: relative;
            overflow: hidden;
        }
        .scard::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--blue-dark), var(--blue-light));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition);
        }
        .scard:hover {
            border-color: transparent;
            box-shadow: 0 8px 40px rgba(27,58,140,0.1);
            transform: translateY(-4px);
        }
        .scard:hover::after { transform: scaleX(1); }

        .scard-icon {
            font-size: 2rem;
            margin-bottom: 16px;
            display: block;
        }
        .scard h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 10px;
            line-height: 1.3;
        }
        .scard p {
            font-size: 0.87rem;
            color: var(--text-muted);
            line-height: 1.7;
        }
        .scard-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--blue-mid);
            font-size: 0.84rem;
            font-weight: 600;
            margin-top: 18px;
            transition: gap var(--transition);
        }
        .scard-link:hover { gap: 9px; }

        /* =============================================
           WHY TM SYSTEMS
        ============================================= */
        #por-que-nosotros {
            padding: 100px 0;
            background: var(--bg-dark);
            position: relative;
            overflow: hidden;
        }
        #por-que-nosotros::before {
            content: '';
            position: absolute;
            top: 0; right: -15%;
            width: 55%; height: 100%;
            background: radial-gradient(ellipse, rgba(33,118,174,0.1) 0%, transparent 70%);
        }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2px;
            background: rgba(255,255,255,0.05);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }
        .why-item {
            background: var(--bg-dark);
            padding: 52px 36px;
            text-align: center;
            transition: background var(--transition);
        }
        .why-item:hover { background: var(--bg-dark2); }

        .why-num {
            font-size: 3.2rem;
            font-weight: 900;
            line-height: 1;
            margin-bottom: 10px;
            background: linear-gradient(130deg, var(--blue-light), var(--blue-mid));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .why-label {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 12px;
        }
        .why-desc {
            font-size: 0.82rem;
            color: rgba(255,255,255,0.48);
            line-height: 1.65;
        }

        /* =============================================
           CÓMO TRABAJAMOS
        ============================================= */
        #como-trabajamos {
            padding: 100px 0;
            background: var(--white);
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            position: relative;
            margin-top: 60px;
        }

        .steps-grid::before {
            content: '';
            position: absolute;
            top: 52px;
            left: calc(16.67% + 20px);
            right: calc(16.67% + 20px);
            height: 2px;
            background: linear-gradient(90deg, var(--blue-dark), var(--blue-light), var(--blue-dark));
            z-index: 0;
        }

        .step {
            text-align: center;
            padding: 0 32px;
            position: relative;
            z-index: 1;
        }

        .step-num {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, var(--blue-dark), var(--blue-mid));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 28px;
            font-family: 'Exo 2', sans-serif;
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--white);
            box-shadow: 0 4px 20px rgba(33,118,174,0.4);
            position: relative;
        }

        .step-num::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid rgba(33,118,174,0.25);
        }

        .step h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 12px;
        }

        .step p {
            font-size: 0.88rem;
            color: var(--text-muted);
            line-height: 1.7;
        }

        .step-tag {
            display: inline-block;
            background: rgba(33,118,174,0.08);
            color: var(--blue-mid);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 4px 12px;
            border-radius: 100px;
            margin-bottom: 16px;
        }

        @media (max-width: 768px) {
            .steps-grid {
                grid-template-columns: 1fr;
                gap: 48px;
            }
            .steps-grid::before { display: none; }
        }

        /* =============================================
           NOSOTROS
        ============================================= */
        #nosotros {
            padding: 100px 0;
            background: var(--white);
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .about-content h2 {
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            font-weight: 800;
            color: var(--text-dark);
            line-height: 1.2;
            margin-bottom: 20px;
            letter-spacing: -0.01em;
        }
        .about-content p {
            font-size: 0.97rem;
            color: var(--text-muted);
            line-height: 1.8;
            margin-bottom: 18px;
        }

        .about-mision {
            background: var(--bg-light);
            border-left: 4px solid var(--blue-mid);
            padding: 20px 24px;
            border-radius: 0 var(--radius) var(--radius) 0;
            margin: 28px 0 32px;
        }
        .about-mision strong {
            display: block;
            color: var(--blue-dark);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin-bottom: 8px;
        }
        .about-mision p {
            margin: 0;
            color: var(--text-dark);
            font-style: italic;
            font-size: 0.93rem;
        }

        .about-values {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .val-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        .val-dot {
            width: 7px; height: 7px;
            background: var(--blue-mid);
            border-radius: 50%;
            margin-top: 7px;
            flex-shrink: 0;
        }
        .val-item strong {
            display: block;
            font-size: 0.87rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 2px;
        }
        .val-item span {
            font-size: 0.79rem;
            color: var(--text-muted);
        }

        /* About visual */
        .about-visual { position: relative; }

        .about-img {
            width: 100%;
            aspect-ratio: 4/3;
            background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark2) 100%);
            border-radius: var(--radius-lg);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            /* When you have a photo:
               background: url('img/nosotros.jpg') center/cover no-repeat;
            */
        }
        .about-img-ph {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            color: rgba(255,255,255,0.25);
            font-size: 0.82rem;
            text-align: center;
        }

        .about-badge {
            position: absolute;
            bottom: -18px; right: -18px;
            background: var(--blue-dark);
            color: var(--white);
            padding: 22px 26px;
            border-radius: var(--radius);
            text-align: center;
            box-shadow: var(--shadow-blue);
        }
        .about-badge .ab-num {
            font-size: 2rem;
            font-weight: 900;
            color: var(--blue-light);
            line-height: 1;
        }
        .about-badge .ab-txt {
            font-size: 0.67rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.65;
            margin-top: 5px;
        }

        /* =============================================
           FAQ
        ============================================= */
        #faq {
            padding: 100px 0;
            background: var(--bg-light);
        }

        .faq-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-top: 60px;
        }

        .faq-item {
            background: var(--white);
            border: 1px solid #E2E8F0;
            border-radius: var(--radius);
            overflow: hidden;
            transition: box-shadow var(--transition);
        }

        .faq-item:hover {
            box-shadow: 0 4px 20px rgba(27,58,140,0.08);
        }

        .faq-question {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 22px 24px;
            background: none;
            border: none;
            cursor: pointer;
            text-align: left;
            font-family: 'Exo 2', 'Inter', sans-serif;
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-dark);
            transition: color var(--transition);
        }

        .faq-question:hover { color: var(--blue-dark); }

        .faq-question.open { color: var(--blue-dark); }

        .faq-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--blue-pale);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all var(--transition);
            color: var(--blue-dark);
            font-size: 1.1rem;
            font-weight: 300;
            line-height: 1;
        }

        .faq-question.open .faq-icon {
            background: var(--orange);
            color: var(--white);
            transform: rotate(45deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, padding 0.35s ease;
        }

        .faq-answer.open {
            max-height: 200px;
        }

        .faq-answer-inner {
            padding: 0 24px 22px;
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.75;
            border-top: 1px solid #F1F5F9;
            padding-top: 16px;
        }

        @media (max-width: 768px) {
            .faq-grid { grid-template-columns: 1fr; }
        }

        /* =============================================
           CONTACT
        ============================================= */
        #contacto {
            padding: 100px 0;
            background: var(--bg-dark);
            position: relative;
            overflow: hidden;
        }
        #contacto::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(33,118,174,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(33,118,174,0.05) 1px, transparent 1px);
            background-size: 40px 40px;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            position: relative;
            z-index: 1;
        }

        .contact-info h2 {
            font-size: clamp(1.8rem, 3vw, 2.4rem);
            font-weight: 800;
            color: var(--white);
            line-height: 1.2;
            margin-bottom: 14px;
            letter-spacing: -0.01em;
        }
        .contact-info > p {
            color: rgba(255,255,255,0.55);
            margin-bottom: 36px;
            line-height: 1.75;
        }

        .wa-big-btn {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            background: var(--wa-green);
            color: var(--white);
            padding: 18px 32px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 1.05rem;
            margin-bottom: 40px;
            transition: all var(--transition);
            box-shadow: 0 6px 28px rgba(37,211,102,0.3);
        }
        .wa-big-btn:hover {
            background: #1fb854;
            transform: translateY(-2px);
            box-shadow: 0 10px 36px rgba(37,211,102,0.45);
        }

        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        .ci {
            display: flex;
            align-items: flex-start;
            gap: 14px;
        }
        .ci-icon {
            width: 42px; height: 42px;
            background: rgba(33,118,174,0.14);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }
        .ci strong {
            display: block;
            color: var(--white);
            font-size: 0.83rem;
            font-weight: 600;
            margin-bottom: 3px;
        }
        .ci span {
            color: rgba(255,255,255,0.5);
            font-size: 0.87rem;
            line-height: 1.5;
        }

        .social-row {
            display: flex;
            gap: 10px;
            margin-top: 32px;
        }
        .social-btn {
            width: 44px; height: 44px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.09);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.6);
            font-size: 1rem;
            transition: all var(--transition);
        }
        .social-btn:hover {
            background: var(--blue-mid);
            border-color: var(--blue-mid);
            color: var(--white);
            transform: translateY(-2px);
        }

        .contact-map {
            margin-top: 28px;
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.07);
        }
        .contact-map iframe {
            width: 100%;
            height: 210px;
            border: none;
            display: block;
            filter: grayscale(40%) brightness(0.85);
        }

        /* Contact form */
        .cform-wrap {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: var(--radius-lg);
            padding: 44px;
        }
        .cform-wrap h3 {
            color: var(--white);
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 28px;
        }
        .fg { margin-bottom: 18px; }
        .fg label {
            display: block;
            color: rgba(255,255,255,0.55);
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            margin-bottom: 7px;
        }
        .fg input, .fg select, .fg textarea {
            width: 100%;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.09);
            border-radius: 8px;
            color: var(--white);
            font-family: 'Inter', sans-serif;
            font-size: 0.93rem;
            padding: 12px 15px;
            transition: border-color var(--transition), background var(--transition);
            outline: none;
        }
        .fg input::placeholder, .fg textarea::placeholder {
            color: rgba(255,255,255,0.22);
        }
        .fg input:focus, .fg select:focus, .fg textarea:focus {
            border-color: var(--blue-mid);
            background: rgba(33,118,174,0.08);
        }
        .fg textarea { resize: vertical; min-height: 96px; }
        .fg select option { background: var(--bg-dark2); color: var(--white); }

        .fg-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
        }

        .form-btn {
            width: 100%;
            background: var(--blue-mid);
            color: var(--white);
            border: none;
            border-radius: 10px;
            padding: 14px 24px;
            font-family: 'Inter', sans-serif;
            font-size: 0.97rem;
            font-weight: 700;
            cursor: pointer;
            transition: all var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 6px;
        }
        }
        .form-btn:hover {
            background: var(--blue-dark);
            box-shadow: 0 6px 24px rgba(33,118,174,0.4);
        }

        /* =============================================
           FOOTER
        ============================================= */
        footer {
            background: var(--bg-darkest);
            border-top: 1px solid var(--border-dark);
            padding: 40px 0 20px;
        }
        .footer-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 24px;
            padding-bottom: 28px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border-dark);
        }
        .footer-links {
            display: flex;
            gap: 28px;
            list-style: none;
        }
        .footer-links a {
            color: rgba(255,255,255,0.4);
            font-size: 0.84rem;
            transition: color var(--transition);
        }
        .footer-links a:hover { color: rgba(255,255,255,0.75); }
        .footer-copy {
            text-align: center;
            color: rgba(255,255,255,0.25);
            font-size: 0.78rem;
        }

        /* =============================================
           WHATSAPP FAB
        ============================================= */
        .wa-fab {
            position: fixed;
            bottom: 28px; right: 28px;
            z-index: 900;
            width: 60px; height: 60px;
            background: var(--wa-green);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(37,211,102,0.5);
            transition: all var(--transition);
        }
        .wa-fab:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 32px rgba(37,211,102,0.65);
        }
        .wa-fab::before {
            content: '';
            position: absolute;
            width: 100%; height: 100%;
            border-radius: 50%;
            background: var(--wa-green);
            opacity: 0.35;
            animation: wapulse 2.5s ease-out infinite;
        }
        @keyframes wapulse {
            0%   { transform: scale(1); opacity: 0.35; }
            100% { transform: scale(1.9); opacity: 0; }
        }

        /* =============================================
           RESPONSIVE
        ============================================= */
        @media (max-width: 1024px) {
            .services-grid { grid-template-columns: repeat(2, 1fr); }
            .services-grid-3 { grid-template-columns: repeat(2, 1fr); }
            .why-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 860px) {
            .nav-links { display: none; }
            .hamburger { display: flex; }
            .service-featured {
                grid-template-columns: 1fr;
                gap: 28px;
            }
            .about-grid { grid-template-columns: 1fr; gap: 48px; }
            .about-badge { display: none; }
            .contact-grid { grid-template-columns: 1fr; gap: 48px; }
            .hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
            .hstat:nth-child(2) { border-right: none; }
            .hstat:nth-child(3) { border-right: 1px solid var(--border-dark); }
        }
        @media (max-width: 620px) {
            .services-grid, .services-grid-3 { grid-template-columns: 1fr; }
            .hero-actions { flex-direction: column; }
            .hero-actions a { text-align: center; justify-content: center; }
            .why-grid { grid-template-columns: 1fr; }
            .about-values { grid-template-columns: 1fr; }
            .fg-row { grid-template-columns: 1fr; }
            .cform-wrap { padding: 28px 22px; }
            .footer-top { flex-direction: column; align-items: flex-start; }
        }
        /* =============================================
           TEMA v2: BLANCO / AZUL / NARANJA
        ============================================= */
        :root {
            --orange:       #F97316;
            --orange-dark:  #EA580C;
            --orange-pale:  #FFF7ED;
            --blue-pale:    #EFF6FF;
        }

        /* ---- NAVBAR: texto oscuro sobre fondo blanco ---- */
        nav {
            border-bottom: 1px solid rgba(27,58,140,0.08);
        }
        nav.scrolled {
            background: rgba(255,255,255,0.97) !important;
            backdrop-filter: blur(14px) !important;
            border-bottom: 1px solid rgba(27,58,140,0.12) !important;
            box-shadow: 0 2px 24px rgba(27,58,140,0.1) !important;
        }
        .logo-isotipo-img { filter: none; }
        .logo-brand .sys { color: var(--blue-dark); }
        .logo-tagline { color: var(--text-muted); }
        .nav-links a { color: var(--text-dark); }
        .nav-links a:hover { color: var(--blue-dark); }
        .nav-links a::after { background: var(--orange); }
        .hamburger span { background: var(--text-dark); }

        /* ---- HERO: foto de fondo con overlay blanco izquierda ---- */
        #inicio {
            background:
                linear-gradient(105deg, rgba(255,255,255,0.88) 32%, rgba(255,255,255,0.08) 100%),
                url('img/hero-bg.jpg') right center / cover no-repeat;
        }
        .hero-content {
            display: grid;
            grid-template-columns: 3fr 2fr;
            gap: 64px;
            align-items: center;
            max-width: none;
        }
        .hero-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .hero-actions a {
            text-align: center;
            justify-content: center;
        }
        .btn-outline {
            color: var(--blue-dark);
            border-color: rgba(27,58,140,0.25);
        }
        .btn-outline:hover {
            background: var(--blue-pale);
            border-color: var(--blue-dark);
            color: var(--blue-dark);
        }
        #inicio::before {
            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);
        }
        #inicio::after {
            background:
                radial-gradient(ellipse 60% 50% at 88% 40%, rgba(249,115,22,0.07) 0%, transparent 65%),
                radial-gradient(ellipse 50% 60% at -5% 95%, rgba(27,58,140,0.05) 0%, transparent 60%);
        }
        .hero-badge {
            background: rgba(27,58,140,0.06);
            border: 1px solid rgba(27,58,140,0.14);
            color: var(--blue-dark);
        }
        .hero-badge-dot { background: var(--orange); }
        .hero-title { color: var(--blue-dark); }
        .hero-title .accent {
            background: linear-gradient(130deg, var(--orange) 0%, var(--orange-dark) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-sub { color: var(--text-muted); }

        /* Stats bar sobre blanco */
        .hero-stats {
            background: rgba(27,58,140,0.04);
            backdrop-filter: none;
            border-top: 1px solid rgba(27,58,140,0.1);
        }
        .hstat { border-right-color: rgba(27,58,140,0.12); }
        .hstat-num { color: var(--blue-dark); }
        .hstat-num em { color: var(--blue-dark); font-style: normal; }
        .hstat-lbl { color: var(--text-muted); }

        /* ---- SECCIÓN ¿POR QUÉ TM?: fondo blanco, texto oscuro ---- */
        #por-que-nosotros { background: var(--white); }
        #por-que-nosotros::before { display: none; }
        #por-que-nosotros .section-header h2 { color: var(--blue-dark) !important; }
        #por-que-nosotros .section-header p  { color: var(--text-muted) !important; }
        .why-grid {
            background: rgba(27,58,140,0.06);
            border-radius: var(--radius-lg);
        }
        .why-item { background: var(--blue-pale); }
        .why-item:hover { background: #DBEAFE; }
        .why-label { color: var(--text-dark) !important; }
        .why-desc  { color: var(--text-muted) !important; }

        /* ---- SECCIÓN CONTACTO: azul pálido (no azul oscuro) ---- */
        #contacto { background: var(--blue-pale); }
        #contacto::before {
            background-image:
                linear-gradient(rgba(27,58,140,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(27,58,140,0.05) 1px, transparent 1px);
        }
        .contact-info h2 { color: var(--blue-dark); }
        .contact-info > p { color: var(--text-muted); }
        .ci strong { color: var(--text-dark); }
        .ci span { color: var(--text-muted); }
        .ci-icon { background: rgba(27,58,140,0.08); }
        .social-btn {
            background: rgba(27,58,140,0.06);
            border: 1px solid rgba(27,58,140,0.12);
            color: var(--text-muted);
        }
        .social-btn:hover {
            background: var(--blue-dark);
            border-color: var(--blue-dark);
            color: var(--white);
        }
        .contact-map { border-color: rgba(27,58,140,0.12); }
        .contact-map iframe { filter: none; }

        /* Formulario sobre fondo claro */
        .cform-wrap {
            background: var(--white);
            border: 1px solid rgba(27,58,140,0.1);
            box-shadow: 0 4px 32px rgba(27,58,140,0.08);
        }
        .cform-wrap h3 { color: var(--blue-dark); }
        .fg label { color: var(--text-muted); }
        .fg input, .fg select, .fg textarea {
            background: var(--white);
            border: 1px solid rgba(27,58,140,0.18);
            color: var(--text-dark);
        }
        .fg input::placeholder, .fg textarea::placeholder {
            color: rgba(100,116,139,0.5);
        }
        .fg input:focus, .fg select:focus, .fg textarea:focus {
            border-color: var(--blue-mid);
            background: var(--white);
        }
        .fg select option { background: var(--white); color: var(--text-dark); }

        /* ---- BOTONES PRIMARIOS → naranja ---- */
        .btn-primary {
            background: var(--orange);
            box-shadow: 0 4px 24px rgba(249,115,22,0.3);
        }
        .btn-primary:hover {
            background: var(--orange-dark);
            box-shadow: 0 8px 32px rgba(249,115,22,0.45);
        }
        .btn-primary.btn-blue {
            background: var(--blue-dark) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 20px rgba(27,58,140,0.30) !important;
        }
        .btn-primary.btn-blue:hover {
            background: var(--blue-mid) !important;
            transform: translateY(-2px);
        }
        .form-btn:hover {
            background: #1fb854;
            box-shadow: 0 6px 24px rgba(37,211,102,0.4);
        }

        /* Section tags → naranja */
        .section-tag {
            background: rgba(249,115,22,0.08);
            color: var(--orange-dark);
            border-color: rgba(249,115,22,0.22);
        }

        /* Links de servicios → naranja */
        .scard-link { color: var(--orange-dark); }
        .scard::after { background: linear-gradient(90deg, var(--orange), var(--blue-mid)); }

        /* Círculos de pasos → naranja */
        .step-num {
            background: linear-gradient(135deg, var(--orange), var(--orange-dark));
            box-shadow: 0 4px 20px rgba(249,115,22,0.35);
        }
        .step-num::after { border-color: rgba(249,115,22,0.2); }
        .step-tag { background: rgba(249,115,22,0.08); color: var(--orange-dark); }
        .steps-grid::before { background: linear-gradient(90deg, var(--orange), var(--blue-mid), var(--orange)); }

        /* Misión / valores → naranja */
        .about-mision { border-left-color: var(--orange); }
        .about-mision strong { color: var(--orange-dark); }
        .val-dot { background: var(--orange); }
        .about-badge { background: var(--orange); }
        .about-badge .ab-num { color: var(--white); }

        /* Nav CTA → verde WhatsApp */
        .nav-cta { background: var(--wa-green) !important; }
        .nav-cta:hover {
            background: #1fb854 !important;
            box-shadow: 0 4px 18px rgba(37,211,102,0.4) !important;
        }

        /* ---- HERO responsive: una columna en móvil ---- */
        @media (max-width: 860px) {
            .hero-content {
                grid-template-columns: 1fr;
                gap: 36px;
            }
            .hero-actions a { width: 100%; }
        }

        /* Link Vitrina en navbar */
        .nav-vitrina {
            color: var(--orange-dark) !important;
            font-weight: 600 !important;
        }
        .nav-vitrina:hover { color: var(--orange) !important; }
        .nav-vitrina::after { background: var(--orange) !important; }

        /* Link Seguimiento Reparación en navbar */
        .nav-rastrear { color: var(--blue-mid) !important; font-weight: 600 !important; }
        .nav-rastrear:hover { color: var(--blue-dark) !important; }
        .nav-rastrear::after { background: var(--blue-mid) !important; }

        /* ---- FOOTER → fondo blanco, borde azul TM ---- */
        footer {
            background: var(--white);
            border-top: 3px solid var(--blue-dark);
        }
        .footer-top { border-bottom-color: rgba(27,58,140,0.1); }
        .footer-links a { color: var(--text-muted); }
        .footer-links a:hover { color: var(--blue-dark); }
        .footer-copy { color: var(--text-muted); }

        /* ---- MOBILE MENU → azul TM (no navy casi negro) ---- */
        .mobile-menu { background: var(--blue-dark); }
        .mobile-menu a:hover { color: rgba(255,255,255,0.85); }

        /* ---- .why-num → gradiente brand (sin sky blue) ---- */
        .why-num {
            background: linear-gradient(130deg, var(--blue-mid) 0%, var(--blue-dark) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ---- Placeholder imagen Nosotros → azul pálido ---- */
        .about-img {
            background: none;
        }

        /* ---- Tarjeta Soporte Empresarial → gradiente solo con azules brand ---- */
        .service-featured {
            background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%);
        }

        /* ---- Dots lista tarjeta featured → blancos (card fondo azul) ---- */
        .sf-list li::before { background: rgba(255,255,255,0.7); }


        /* ---- Imágenes en cards de servicios — full-bleed top ---- */
        .scard-img {
            position: absolute;
            top: 0; left: 0; right: 0;
            width: 100%;
            height: 190px;
            object-fit: cover;
            object-position: center;
            margin: 0;
        }
        .scard.has-img {
            padding-top: 210px;
        }
    </style>
</head>
<body>

<!-- ===================== NAVBAR ===================== -->
<nav id="navbar">
    <div class="container nav-inner">

        <a href="#inicio" 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 class="sys">SYSTEMS</span>
                </div>
                <div class="logo-tagline">Soluciones en Sistemas y Administración</div>
            </div>
        </a>

        <ul class="nav-links">
            <li><a href="#servicios">Servicios</a></li>
            <li><a href="#como-trabajamos">Proceso</a></li>
            <li><a href="#nosotros">Nosotros</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#contacto">Contacto</a></li>
            <li><a href="/rastreo" class="nav-rastrear">Seguimiento Reparación</a></li>
            <li><a href="ofertas.html" class="nav-vitrina">Ofertas y Remates</a></li>
            <li>
                <a href="https://wa.me/525630280100?text=Hola%2C%20me%20interesa%20información%20sobre%20sus%20servicios%20de%20TI"
                   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" id="hamburger" aria-label="Menú">
            <span></span><span></span><span></span>
        </button>
    </div>
</nav>

<!-- Mobile Menu -->
<div class="mobile-menu" id="mobileMenu" role="dialog" aria-modal="true">
    <button class="mobile-close" id="mobileClose" aria-label="Cerrar menú">✕</button>
    <a href="#servicios" class="m-link">Servicios</a>
    <a href="#como-trabajamos" class="m-link">Proceso</a>
    <a href="#nosotros" class="m-link">Nosotros</a>
    <a href="#contacto" class="m-link">Contacto</a>
    <a href="/rastreo" class="m-link">Seguimiento Reparación</a>
    <a href="https://wa.me/525630280100" target="_blank" style="color: var(--wa-green);">WhatsApp</a>
</div>


<!-- ===================== HERO ===================== -->
<section id="inicio">
    <div class="container">
        <div class="hero-content">
            <div class="hero-text">
                <h1 class="hero-title reveal">
                    Tecnología confiable<br>
                    para empresas que<br>
                    <span class="accent">no pueden detenerse.</span>
                </h1>
                <p class="hero-sub reveal d1">
                    Soporte administrado, infraestructura TI, ciberseguridad y continuidad
                    operativa para empresas y PYMES. Respondemos cuando tu negocio más lo necesita.
                </p>
            </div>

            <div class="hero-actions reveal d2">
                <a href="#contacto" class="btn-primary">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                    </svg>
                    Solicita una consulta
                </a>
                <a href="#servicios" class="btn-primary btn-blue">
                    Ver servicios
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </a>
                <a href="https://wa.me/525630280100?text=Hola%2C%20quisiera%20información%20sobre%20sus%20servicios"
                   class="btn-wa" target="_blank" rel="noopener">
                    <svg width="17" height="17" 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>
                    Escríbenos ahora
                </a>
            </div>
        </div>
    </div>

    <!-- Stats strip -->
    <div class="hero-stats">
        <div class="hero-stats-grid">
            <div class="hstat reveal">
                <div class="hstat-num"><span data-count="30" data-suffix="+">30+</span></div>
                <div class="hstat-lbl">Años de experiencia</div>
            </div>
            <div class="hstat reveal d1">
                <div class="hstat-num"><em>&lt;</em>2<em>h</em></div>
                <div class="hstat-lbl">Tiempo de respuesta</div>
            </div>
            <div class="hstat reveal d2">
                <div class="hstat-num">24<em>/7</em></div>
                <div class="hstat-lbl">Soporte disponible</div>
            </div>
            <div class="hstat reveal d3">
                <div class="hstat-num"><span data-count="100" data-suffix="%">100%</span></div>
                <div class="hstat-lbl">Compromiso garantizado</div>
            </div>
        </div>
    </div>
</section>


<!-- ===================== SERVICIOS ===================== -->
<section id="servicios">
    <div class="container">
        <div class="section-header reveal">
            <span class="section-tag">Lo que hacemos</span>
            <h2>Servicios diseñados para<br>la continuidad de tu empresa</h2>
            <p>Desde soporte preventivo hasta respuesta a incidentes críticos. Tu tecnología en las mejores manos.</p>
        </div>

        <!-- FEATURED: Soporte Empresarial -->
        <div class="service-featured reveal">
            <div>
                <span class="sf-icon">🏢</span>
                <h3>Contratos de Soporte Empresarial</h3>
                <p>
                    El corazón de nuestra operación. Administramos tu infraestructura TI de manera
                    integral para que tu empresa nunca se detenga. Helpdesk, monitoreo proactivo,
                    administración de plataformas y respuesta rápida ante cualquier incidencia.
                </p>
            </div>
            <div>
                <ul class="sf-list">
                    <li>Helpdesk con tiempo de respuesta garantizado</li>
                    <li>Monitoreo proactivo de sistemas 24/7</li>
                    <li>Administración de redes y servidores</li>
                    <li>Gestión de usuarios, permisos y accesos</li>
                    <li>Soporte remoto inmediato y visitas en sitio</li>
                    <li>Reportes mensuales de estado y rendimiento</li>
                </ul>
                <a href="https://wa.me/525630280100?text=Hola%2C%20me%20interesa%20un%20contrato%20de%20soporte%20empresarial"
                   class="sf-cta" target="_blank" rel="noopener">
                    Solicitar cotización
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <path d="M5 12h14M12 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>
        </div>


        <!-- 4 Priority services (renderizadas desde data/servicios.json) -->
        <div class="services-grid" id="services-grid-4">
        </div>

        <!-- 3 Additional services (renderizadas desde data/servicios.json) -->
        <div class="services-grid-3" id="services-grid-3" style="margin-top: 20px;">
        </div>
    </div>
</section>


<!-- ===================== POR QUÉ TM ===================== -->
<section id="por-que-nosotros">
    <div class="container">
        <div class="section-header reveal">
            <span class="section-tag light">¿Por qué elegirnos?</span>
            <h2 style="color: var(--white);">Lo que nos hace diferentes</h2>
            <p style="color: rgba(255,255,255,0.5);">Más de tres décadas respaldando empresas y PYMES en CDMX con resultados reales y confianza probada.</p>
        </div>

        <div class="why-grid">
            <div class="why-item reveal">
                <div class="why-num">30+</div>
                <div class="why-label">Años de experiencia</div>
                <div class="why-desc">Desde 1994 resolviendo problemas tecnológicos. Permanencia y estabilidad que pocas empresas TI pueden ofrecer en México.</div>
            </div>
            <div class="why-item reveal d1">
                <div class="why-num">&lt;2h</div>
                <div class="why-label">Respuesta rápida</div>
                <div class="why-desc">Soporte remoto inmediato y visitas en sitio programadas. Cada minuto sin sistemas representa pérdidas reales para tu negocio.</div>
            </div>
            <div class="why-item reveal d2">
                <div class="why-num">100%</div>
                <div class="why-label">Confidencialidad</div>
                <div class="why-desc">Tu información es sagrada. Operamos con altos estándares de ética y seguridad en cada intervención técnica.</div>
            </div>
            <div class="why-item reveal d3">
                <div class="why-num">✓</div>
                <div class="why-label">Solo lo que necesitas</div>
                <div class="why-desc">No vendemos servicios innecesarios. Resolvemos el problema de raíz con transparencia y honestidad total — siempre.</div>
            </div>
        </div>
    </div>
</section>


<!-- ===================== CÓMO TRABAJAMOS ===================== -->
<section id="como-trabajamos">
    <div class="container">
        <div class="section-header reveal">
            <span class="section-tag">Nuestro proceso</span>
            <h2>Así es como trabajamos</h2>
            <p>Un proceso claro, transparente y sin sorpresas. Desde el primer contacto hasta la resolución.</p>
        </div>

        <div class="steps-grid">
            <div class="step reveal">
                <div class="step-num">01</div>
                <span class="step-tag">Día 1</span>
                <h3>Diagnóstico y Evaluación de opciones</h3>
                <p>Evaluamos tu infraestructura actual: equipos, redes, servidores y necesidades reales. Te presentamos opciones claras con sus costos y ventajas — tú decides qué se hace.</p>
            </div>
            <div class="step reveal d2">
                <div class="step-num">02</div>
                <span class="step-tag">Semana 1</span>
                <h3>Plan a tu medida</h3>
                <p>Diseñamos una propuesta específica para tu operación — no vendemos paquetes genéricos. Definimos alcances, tiempos de respuesta, SLA y presupuesto claro.</p>
            </div>
            <div class="step reveal d4">
                <div class="step-num">03</div>
                <span class="step-tag">Operación continua</span>
                <h3>Soporte sin interrupciones</h3>
                <p>Implementamos, monitoreamos y respondemos. Reportes mensuales de estado, atención por WhatsApp y visitas programadas. Tu tecnología siempre bajo control.</p>
            </div>
        </div>
    </div>
</section>


<!-- ===================== NOSOTROS ===================== -->
<section id="nosotros">
    <div class="container">
        <div class="about-grid">

            <div class="about-content reveal-l">
                <span class="section-tag">Nuestra historia</span>
                <h2>Tres décadas construyendo confianza tecnológica</h2>
                <p>
                    TM Systems nace formalmente en <strong>junio de 2005</strong>, aunque nuestra historia
                    comenzó en <strong>1994</strong> atendiendo a familiares y amigos, armando y actualizando
                    sus primeras computadoras.
                </p>
                <p>
                    Con el paso de los años nos convertimos en una consultora dedicada a atender PYMES y
                    usuario final en áreas de mantenimiento preventivo y correctivo, redes, servidores,
                    gestión de plataformas tecnológicas y Helpdesk de Sistemas. Con amplia experiencia en
                    venta de equipos, recuperación de datos, hosting, correo empresarial y seguridad informática.
                </p>

                <div class="about-mision">
                    <strong>Nuestra Misión</strong>
                    <p>Democratizar y optimizar el uso de las nuevas tecnologías y la administración de sistemas para el usuario final y la PYME, con calidad, honestidad y atención al detalle.</p>
                </div>

                <div class="about-values">
                    <div class="val-item">
                        <div class="val-dot"></div>
                        <div>
                            <strong>Calidad</strong>
                            <span>Sin compromisos en el resultado</span>
                        </div>
                    </div>
                    <div class="val-item">
                        <div class="val-dot"></div>
                        <div>
                            <strong>Honestidad</strong>
                            <span>Diagnósticos transparentes</span>
                        </div>
                    </div>
                    <div class="val-item">
                        <div class="val-dot"></div>
                        <div>
                            <strong>Atención al detalle</strong>
                            <span>Nada queda al azar</span>
                        </div>
                    </div>
                    <div class="val-item">
                        <div class="val-dot"></div>
                        <div>
                            <strong>Servicio al cliente</strong>
                            <span>Tu satisfacción primero</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="about-visual reveal-r">
                <div class="about-img">
                    <img src="img/nosotros.png" alt="Equipo TM Systems" style="width:100%; height:100%; object-fit:cover;">
                </div>
                <div class="about-badge">
                    <div class="ab-num">1994</div>
                    <div class="ab-txt">Inicio de operaciones</div>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- ===================== FAQ ===================== -->
<section id="faq">
    <div class="container">
        <div class="section-header reveal">
            <span class="section-tag">Preguntas frecuentes</span>
            <h2>Lo que nos preguntan siempre</h2>
            <p>Sobre diagnóstico, procesos, tiempos y cómo trabajamos. Si no encuentras tu respuesta, escríbenos.</p>
        </div>

        <div class="faq-grid">

            <div class="faq-item reveal">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Cuánto tiempo tarda un diagnóstico?
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        La mayoría de diagnósticos los completamos en el mismo día que recibes o traes el equipo. Para casos más complejos (servidores, recuperación de datos) puede ser de 24 a 48 horas. Siempre te avisamos antes de proceder con cualquier trabajo.
                    </div>
                </div>
            </div>

            <div class="faq-item reveal d1">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿El diagnóstico tiene algún costo?
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        Para nuevos clientes el diagnóstico inicial es sin costo y sin compromiso. Te presentamos opciones claras — qué se necesita, cuánto cuesta y cuánto tarda — y tú decides si proceder. Para clientes con póliza de mantenimiento activa, el diagnóstico siempre está incluido.
                    </div>
                </div>
            </div>

            <div class="faq-item reveal">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Atienden a domicilio o solo en taller?
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        Las dos modalidades. Para equipos portátiles puedes enviárnoslos por mensajería o Uber Envíos, o dejarlo en nuestras instalaciones en Escandón previa cita por WhatsApp — no contamos con atención sin cita. Para infraestructura de red, servidores o clientes con contrato de soporte hacemos visitas en sitio en CDMX y área metropolitana. También ofrecemos soporte remoto inmediato para la mayoría de problemas de software.
                    </div>
                </div>
            </div>

            <div class="faq-item reveal d1">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Qué pasa si el equipo no tiene solución?
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        Te lo decimos con honestidad antes de cobrar cualquier trabajo. Si el equipo no tiene reparación viable, te orientamos en opciones: recuperación de datos, trade-in o adquisición de equipo nuevo. Nunca cobramos una reparación que no se puede garantizar.
                    </div>
                </div>
            </div>

            <div class="faq-item reveal">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Cuánto tiempo tarda una reparación típica?
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        Depende del tipo de servicio. Problemas de software y configuración: mismo día o al siguiente. Cambio de partes con refacciones en stock: 1 a 2 días. Partes por pedido especial o importación: 5 a 10 días hábiles. Siempre te damos un estimado antes de comenzar.
                    </div>
                </div>
            </div>

            <div class="faq-item reveal d1">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Qué incluye una póliza de mantenimiento?
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        Las pólizas incluyen mantenimiento preventivo físico y de software programado, diagnóstico sin costo, prioridad en atención, descuento en refacciones y mano de obra, soporte remoto incluido y reporte de estado del equipo. Diseñamos la póliza según la cantidad y tipo de equipos de tu empresa.
                    </div>
                </div>
            </div>

            <div class="faq-item reveal">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Pueden recuperar datos de un disco dañado?
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        Sí, contamos con equipo y procesos para recuperación de datos en discos duros mecánicos, SSDs, memorias USB y tarjetas SD con daño lógico (borrado accidental, formato, corrupción). Para daño físico severo trabajamos con laboratorios especializados. El primer paso siempre es una evaluación del nivel de daño antes de cobrar.
                    </div>
                </div>
            </div>

            <div class="faq-item reveal d1">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Cómo funciona el soporte remoto?
                    <span class="faq-icon">+</span>
                </button>
                <div class="faq-answer">
                    <div class="faq-answer-inner">
                        Usamos herramientas de acceso remoto seguro (con tu permiso explícito en cada sesión). Te enviamos un enlace por WhatsApp, lo abres en tu equipo, y podemos ver y resolver el problema en tiempo real mientras hablas con nosotros. No se almacena acceso permanente a tu equipo — cada sesión es independiente.
                    </div>
                </div>
            </div>

        </div>

        <div style="text-align:center; margin-top:48px;" class="reveal">
            <p style="color: var(--text-muted); margin-bottom:20px; font-size:0.95rem;">¿Tienes otra pregunta? Con gusto te respondemos.</p>
            <a href="https://wa.me/525630280100?text=Hola%2C%20tengo%20una%20pregunta%20sobre%20sus%20servicios"
               class="btn-wa" target="_blank" rel="noopener" style="display:inline-flex;">
                <svg width="17" height="17" 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>
                Escríbenos tu pregunta
            </a>
        </div>
    </div>
</section>


<!-- ===================== CONTACTO ===================== -->
<section id="contacto">
    <div class="container">
        <div class="contact-grid">

            <!-- Info column -->
            <div class="contact-info reveal-l">
                <span class="section-tag light">Contáctanos</span>
                <h2>Hablemos sobre<br>tu infraestructura TI</h2>
                <p>Cuéntanos qué necesitas y te respondemos a la brevedad. Sin compromiso, sin letra chica.</p>

                <a href="https://wa.me/525630280100?text=Hola%2C%20me%20interesa%20información%20sobre%20sus%20servicios%20de%20TI"
                   class="wa-big-btn" target="_blank" rel="noopener">
                    <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>
                    Escríbenos al WhatsApp
                </a>

                <div class="contact-details">
                    <div class="ci">
                        <div class="ci-icon">📍</div>
                        <div>
                            <strong>Ubicación</strong>
                            <span>Sindicalismo 102, Col. Escandón II Sección<br>CP 11800, Ciudad de México</span>
                        </div>
                    </div>
                    <div class="ci">
                        <div class="ci-icon">📱</div>
                        <div>
                            <strong>WhatsApp / Teléfono</strong>
                            <span>56 3028 0100</span>
                        </div>
                    </div>
                    <div class="ci">
                        <div class="ci-icon">🕐</div>
                        <div>
                            <strong>Horario de atención</strong>
                            <span>Lunes a Viernes · 9:00–19:00<br>Sábado · 10:00–14:00</span>
                        </div>
                    </div>
                </div>

                <!-- Modalidades de servicio -->
                <div style="margin-top:20px;padding:16px 20px;background:rgba(27,58,140,0.06);border:1px solid rgba(27,58,140,0.14);border-radius:10px;">
                    <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px;">Modalidades de atención</div>
                    <div style="display:flex;flex-direction:column;gap:8px;">
                        <div style="display:flex;align-items:center;gap:10px;font-size:0.88rem;color:var(--text-dark);">
                            <span style="font-size:1.1rem">🏢</span>
                            <span><strong>En nuestras instalaciones</strong> — Previa cita por WhatsApp</span>
                        </div>
                        <div style="display:flex;align-items:center;gap:10px;font-size:0.88rem;color:var(--text-dark);">
                            <span style="font-size:1.1rem">🚗</span>
                            <span><strong>Recolección a domicilio</strong> — En CDMX y área metropolitana</span>
                        </div>
                        <div style="display:flex;align-items:center;gap:10px;font-size:0.88rem;color:var(--text-dark);">
                            <span style="font-size:1.1rem">📦</span>
                            <span><strong>Mensajería / Uber Envíos</strong> — Te damos la dirección al confirmar</span>
                        </div>
                    </div>
                    <a href="https://wa.me/525630280100?text=Hola%2C%20quiero%20agendar%20una%20cita%20para%20llevar%20mi%20equipo"
                       target="_blank" rel="noopener"
                       style="display:inline-block;margin-top:14px;padding:8px 18px;background:#25D366;color:#fff;border-radius:8px;font-size:0.83rem;font-weight:700;text-decoration:none;">
                        📅 Agendar cita por WhatsApp
                    </a>
                </div>

                <!-- Social -->
                <div class="social-row">
                    <a href="https://www.facebook.com/TMSystems" class="social-btn" target="_blank" rel="noopener" title="Facebook">
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/>
                        </svg>
                    </a>
                    <a href="https://www.instagram.com/tmsystemsmx/" class="social-btn" target="_blank" rel="noopener" title="Instagram">
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                            <circle cx="12" cy="12" r="4"/>
                            <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
                        </svg>
                    </a>
                    <a href="https://x.com/TMSystemsMX" class="social-btn" target="_blank" rel="noopener" title="X / Twitter">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                        </svg>
                    </a>
                    <a href="https://www.linkedin.com/company/tmsystemsmx" class="social-btn" target="_blank" rel="noopener" title="LinkedIn">
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/>
                            <circle cx="4" cy="4" r="2"/>
                        </svg>
                    </a>
                    <a href="https://www.youtube.com/@tmsystems5319" class="social-btn" target="_blank" rel="noopener" title="YouTube">
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M22.54 6.42a2.78 2.78 0 00-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 00-1.95 1.96A29 29 0 001 12a29 29 0 00.46 5.58A2.78 2.78 0 003.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 001.95-1.95A29 29 0 0023 12a29 29 0 00-.46-5.58z"/>
                            <polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="#0F172A"/>
                        </svg>
                    </a>
                </div>

                <!-- Map -->
                <div class="contact-map">
                    <iframe
                        src="https://maps.google.com/maps?q=Sindicalismo+102,+Colonia+Escandón,+Ciudad+de+México,+CP+11800&output=embed&z=16"
                        allowfullscreen loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"
                        title="Zona TM Systems — Escandón II Sección, CDMX"></iframe>
                </div>
            </div>

            <!-- Form -->
            <div class="cform-wrap reveal-r">
                <h3>¿Cómo podemos ayudarte?</h3>
                <form id="contactForm" onsubmit="handleFormSubmit(event)" novalidate>
                    <div class="fg-row">
                        <div class="fg">
                            <label for="f-nombre">Nombre</label>
                            <input id="f-nombre" type="text" placeholder="Tu nombre completo" required>
                        </div>
                        <div class="fg">
                            <label for="f-empresa">Empresa</label>
                            <input id="f-empresa" type="text" placeholder="Nombre de tu empresa">
                        </div>
                    </div>
                    <div class="fg-row">
                        <div class="fg">
                            <label for="f-tel">Teléfono / WhatsApp</label>
                            <input id="f-tel" type="tel" placeholder="55 XXXX XXXX" required>
                        </div>
                        <div class="fg">
                            <label for="f-email">Correo electrónico</label>
                            <input id="f-email" type="email" placeholder="tu@empresa.com">
                        </div>
                    </div>
                    <div class="fg">
                        <label for="f-servicio">Servicio de interés</label>
                        <select id="f-servicio">
                            <option value="">Selecciona un servicio...</option>
                            <option>Contrato de Soporte Empresarial</option>
                            <option>Póliza de Mantenimiento</option>
                            <option>Ciberseguridad</option>
                            <option>Recuperación de Datos</option>
                            <option>Cloud y Correo Empresarial</option>
                            <option>Diagnóstico de Equipo</option>
                            <option>Partes y Refacciones</option>
                            <option>Licencias de Software</option>
                            <option>Otro</option>
                        </select>
                    </div>
                    <div class="fg">
                        <label for="f-msg">Mensaje</label>
                        <textarea id="f-msg" placeholder="Cuéntanos brevemente tu situación o necesidad..."></textarea>
                    </div>
                    <button type="submit" class="form-btn">
                        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                            <line x1="22" y1="2" x2="11" y2="13"/>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                        </svg>
                        Enviar mensaje por WhatsApp
                    </button>
                </form>
            </div>

        </div>
    </div>
</section>


<!-- ===================== FOOTER ===================== -->
<footer>
    <div class="container">
        <div class="footer-top">
            <a href="#inicio" class="nav-logo">
                <img src="img/logo-isotipo.png" alt="TM Systems" style="height:42px; width:auto;">
                <div class="logo-text-wrap">
                    <div class="logo-brand"><span class="sys">SYSTEMS</span></div>
                    <div class="logo-tagline">Soluciones en Sistemas y Administración</div>
                </div>
            </a>

            <ul class="footer-links">
                <li><a href="#servicios">Servicios</a></li>
                <li><a href="#por-que-nosotros">¿Por qué TM?</a></li>
                <li><a href="#nosotros">Nosotros</a></li>
                <li><a href="#contacto">Contacto</a></li>
                <li><a href="https://wa.me/525630280100" target="_blank" rel="noopener">WhatsApp</a></li>
            </ul>
        </div>
        <div class="footer-copy">
            &copy; 2025 TM Systems &nbsp;·&nbsp; Soluciones en Sistemas y Administración &nbsp;·&nbsp; Escandón II Sección, CP 11800, CDMX
            &nbsp;·&nbsp; <span style="opacity:0.5; font-size:0.72rem;">v1.4</span>
        </div>
    </div>
</footer>


<!-- WhatsApp FAB -->
<a href="https://wa.me/525630280100?text=Hola%2C%20me%20interesa%20información%20sobre%20sus%20servicios"
   class="wa-fab" target="_blank" rel="noopener" aria-label="Contactar por WhatsApp">
    <svg viewBox="0 0 24 24" width="30" height="30" fill="white">
        <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>
    // ======== NAVBAR SCROLL ========
    const navbar = document.getElementById('navbar');

    // ======== CARGAR SERVICIOS DESDE JSON ========
    (async function loadServicios() {
        try {
            const r = await fetch('data/servicios.json?_=' + Date.now());
            if (!r.ok) return;
            const d = await r.json();
            const srv = d.servicios || [];
            const delays = ['', ' d1', ' d2', ' d3'];

            function renderScard(s, i) {
                const hasImg = s.foto ? ' has-img' : '';
                const imgTag = s.foto ? `<img src="${s.foto}" alt="${s.nombre}" class="scard-img">` : '';
                const waLink = 'https://wa.me/525630280100?text=' + s.link_wa;
                const ytId   = s.video_youtube ? s.video_youtube.match(/(?:v=|youtu\.be\/|embed\/)([A-Za-z0-9_-]{11})/)?.[1] || (s.video_youtube.length===11?s.video_youtube:'') : '';
                const ytBtn  = ytId ? `<a href="https://www.youtube.com/watch?v=${ytId}" class="scard-link" style="color:var(--blue-mid)" target="_blank" rel="noopener">▶ Ver video</a>` : '';
                return `<div class="scard reveal${delays[i%4]||''}${hasImg}">
                    ${imgTag}
                    <span class="scard-icon">${s.icono}</span>
                    <h3>${s.nombre}</h3>
                    <p>${s.descripcion}</p>
                    <a href="${waLink}" class="scard-link" target="_blank" rel="noopener">${s.link_texto}</a>
                    ${ytBtn}
                </div>`;
            }

            const g4 = document.getElementById('services-grid-4');
            const g3 = document.getElementById('services-grid-3');
            if (g4) {
                g4.innerHTML = srv.slice(0,4).map((s,i) => renderScard(s,i)).join('');
                g4.querySelectorAll('.reveal').forEach(el => observer.observe(el));
            }
            if (g3) {
                g3.innerHTML = srv.slice(4).map((s,i) => renderScard(s,i)).join('');
                g3.querySelectorAll('.reveal').forEach(el => observer.observe(el));
            }
        } catch(e) { /* mantener fallback estático si el fetch falla */ }
    })();
    window.addEventListener('scroll', () => {
        navbar.classList.toggle('scrolled', window.scrollY > 60);
    }, { passive: true });

    // ======== HAMBURGER ========
    const hamburger = document.getElementById('hamburger');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileClose = document.getElementById('mobileClose');

    hamburger.addEventListener('click', () => {
        mobileMenu.classList.add('open');
        document.body.style.overflow = 'hidden';
    });
    mobileClose.addEventListener('click', closeMobile);
    document.querySelectorAll('.m-link').forEach(l => l.addEventListener('click', closeMobile));

    function closeMobile() {
        mobileMenu.classList.remove('open');
        document.body.style.overflow = '';
    }

    // ======== SCROLL REVEAL ========
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(e => {
            if (e.isIntersecting) {
                e.target.classList.add('vis');
                observer.unobserve(e.target);
            }
        });
    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

    document.querySelectorAll('.reveal, .reveal-l, .reveal-r').forEach(el => observer.observe(el));

    // Trigger hero immediately after load
    window.addEventListener('load', () => {
        document.querySelectorAll('#inicio .reveal').forEach((el, i) => {
            setTimeout(() => el.classList.add('vis'), i * 120);
        });
    });

    // ======== COUNTER ANIMATION ========
    function animateCounter(el, target, duration, prefix, suffix) {
        const start = performance.now();
        const update = (now) => {
            const elapsed = now - start;
            const progress = Math.min(elapsed / duration, 1);
            const eased = 1 - Math.pow(1 - progress, 3);
            const current = Math.round(eased * target);
            el.textContent = prefix + current + suffix;
            if (progress < 1) requestAnimationFrame(update);
        };
        requestAnimationFrame(update);
    }

    const counterObserver = new IntersectionObserver((entries) => {
        entries.forEach(e => {
            if (!e.isIntersecting) return;
            const el = e.target;
            const raw = el.dataset.count;
            const prefix = el.dataset.prefix || '';
            const suffix = el.dataset.suffix || '';
            animateCounter(el, parseInt(raw), 1800, prefix, suffix);
            counterObserver.unobserve(el);
        });
    }, { threshold: 0.5 });

    document.querySelectorAll('[data-count]').forEach(el => counterObserver.observe(el));

    // ======== SMOOTH SCROLL ========
    document.querySelectorAll('a[href^="#"]').forEach(a => {
        a.addEventListener('click', e => {
            const target = document.querySelector(a.getAttribute('href'));
            if (target) {
                e.preventDefault();
                window.scrollTo({ top: target.getBoundingClientRect().top + window.scrollY - 76, behavior: 'smooth' });
            }
        });
    });

    // ======== FAQ ACCORDION ========
    function toggleFaq(btn) {
        const answer = btn.nextElementSibling;
        const isOpen = btn.classList.contains('open');
        document.querySelectorAll('.faq-question.open').forEach(q => {
            q.classList.remove('open');
            q.nextElementSibling.classList.remove('open');
        });
        if (!isOpen) {
            btn.classList.add('open');
            answer.classList.add('open');
        }
    }

    // ======== FORM → WHATSAPP ========
    function handleFormSubmit(e) {
        e.preventDefault();
        const nombre   = document.getElementById('f-nombre').value.trim();
        const empresa  = document.getElementById('f-empresa').value.trim();
        const tel      = document.getElementById('f-tel').value.trim();
        const email    = document.getElementById('f-email').value.trim();
        const servicio = document.getElementById('f-servicio').value;
        const msg      = document.getElementById('f-msg').value.trim();

        if (!nombre || !tel) {
            alert('Por favor completa al menos tu nombre y teléfono.');
            return;
        }

        const lines = [
            '📩 *Contacto desde tmsystems.mx*',
            '',
            `👤 *Nombre:* ${nombre}`,
            empresa  ? `🏢 *Empresa:* ${empresa}` : null,
            `📱 *Teléfono:* ${tel}`,
            email    ? `✉️ *Email:* ${email}` : null,
            servicio ? `🔧 *Servicio:* ${servicio}` : null,
            msg      ? `💬 *Mensaje:* ${msg}` : null,
        ].filter(Boolean).join('\n');

        window.open(`https://wa.me/525630280100?text=${encodeURIComponent(lines)}`, '_blank');
    }
</script>

</body>
</html>