Tul xxx Tul

Viewing: index.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="http://emprendo.com.co/eComercial/assets/img/Favicon-s.png" type="image/png">
    <title>eComercial</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <!-- Font Awesome 6 CDN: debe ir después de Bootstrap y antes de cualquier otro CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <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=Jost:wght@100..900&display=swap" rel="stylesheet">
    <style>
        /* =====================
           ESTILOS GENERALES
        ===================== */
        body {
            background-color: #f8f9fa;
        }

        h1,
        h2 {
            color: #1a96d3;
        }

        .jost-custom {
            font-family: "Jost", sans-serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
        }

        /* =====================
           HEADER Y NAVEGACIÓN
        ===================== */
        #header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 10px 0;
            transition: background-color 0.3s ease;
        }

        #header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        #header.scrolled::before {
            opacity: 1;
        }

        #logo {
            width: 250px;
            transition: width 0.3s ease;
            display: block;
            margin: 0 auto;
        }

        #logo.shrink {
            width: 200px;
        }

        /* =====================
           TARJETAS Y SECCIONES
        ===================== */
        .card {
            margin: 15px;
            transition: transform 0.3s ease-in-out;
        }

        .card:hover {
            transform: scale(1.05);
        }

        .card-img-top {
            height: 280px;
            object-fit: cover;
        }

        .card-img-mp {
            height: 200px;
            object-fit: contain;
            padding: 20px;
        }

        .card-header {
            background-color: #1a96d3;
            color: white;
        }

        .card-footer {
            background-color: #f8f9fa;
        }

        .features,
        .pricing {
            margin-top: 30px;
            padding: 20px;
            border-radius: 8px;
        }

        .features {
            background-color: #e9ecef;
        }

        .pricing {
            background-color: #d3f9d8;
        }

        .pricing-item {
            background-color: #fff;
            border: 1px solid #28a745;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
        }

        .hidden-card {
            display: none;
        }

        /* =====================
           BOTONES
        ===================== */
        .btn {
            color: white;
            margin-right: 5px;
            font-size: 0.8rem;
        }

        .btn-primary,
        .btn-play {
            background-color: #1a96d3 !important;
            border-color: #1a96d3 !important;
            color: white !important;
        }

        .btn-primary:hover,
        .btn-play:hover {
            background-color: #157bb0 !important;
            border-color: #157bb0 !important;
        }

        .btn-stop,
        .btn-download {
            background-color: #dc3545;
        }

        /* =====================
           VIDEO/BANNER PRINCIPAL
        ===================== */
        .video-banner-container {
            position: relative;
            width: 100vw !important;
            min-width: 100vw !important;
            max-width: 100vw !important;
            left: 0 !important;
            aspect-ratio: 2.4/0.88;
            overflow: hidden;
        }

        .video-banner-container video {
            width: 100vw !important;
            min-width: 100vw !important;
            max-width: 100vw !important;
            height: 100%;
            object-fit: cover;
            display: block;
            background: #fff;
            position: absolute;
            top: 0;
            left: 0;
        }

        .video-gradient {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        /* =====================
           CONTROLES FLOTANTES (AUDIO)
        ===================== */
        #toggleSeekBarButton {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1001;
            background-color: #1a96d3;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        #toggleSeekBarButton:hover {
            background-color: #157bb0;
        }

        #globalAudioSeekContainer {
            position: fixed;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            display: none;
        }

        #stopAudioButton {
            position: fixed;
            bottom: 20px;
            right: 80px;
            z-index: 1001;
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        #stopAudioButton:hover {
            background-color: #c82333;
        }

        .header-placeholder {
            height: 80px;
        }

        /* =====================
           BARRA DE NAVEGACIÓN (NAV)
        ===================== */
        .navbar-nav .nav-link {
            color: #1a96d3;
            font-weight: 500;
            border-radius: 20px;
            padding: 8px 22px;
            margin: 0 4px;
            transition: background 0.2s, color 0.2s;
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link:focus {
            background: #157bb0;
            color: #fff;
        }

        .navbar-nav .nav-link.active,
        .navbar-nav .nav-link.selected {
            background: #ff9e1b;
            color: #fff !important;
        }

        /* =====================
           RESPONSIVE DESIGN
        ===================== */
        @media (max-width: 1200px) {
            .video-banner-container {
                aspect-ratio: 2.4/0.9;
            }
            #logo {
                width: 180px;
            }
        }
        @media (max-width: 992px) {
            .video-banner-container {
                aspect-ratio: 2.4/0.9;
            }
            #logo {
                width: 140px;
            }
            .footer-logo img {
                height: 48px;
                max-width: 120px;
            }
        }
        @media (max-width: 768px) {
            .video-banner-container {
                aspect-ratio: 2.4/0.9;
            }
            #logo {
                width: 110px;
                height: 60px !important;
                max-width: 110px;
            }
            .footer-logo img {
                height: 36px;
                max-width: 90px;
            }
        }
        @media (max-width: 576px) {
            .video-banner-container {
                aspect-ratio: 2.4/0.9;
            }
            #logo {
                width: 80px;
                height: 40px !important;
                max-width: 80px;
            }
            .footer-logo img {
                height: 28px;
                max-width: 60px;
            }
            h1, h2 {
                font-size: 1.3rem !important;
            }
            .card-img-top, .card-img-mp {
                height: 280px;
            }
        }
        /* =====================
           MENÚ HAMBURGUESA RESPONSIVE
        ===================== */
        @media (max-width: 992px) {
            .custom-navbar .container-fluid {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: space-between !important;
                padding-left: 10px !important;
                padding-right: 10px !important;
            }
            /* Eliminar control de display de los logos aquí */
            /* #logo-navbar-mobile { display: block !important; margin-right: auto !important; } */
            /* #logo-navbar { display: none !important; } */
            .navbar-toggler.d-lg-none {
                margin-left: auto !important;
            }
            .custom-navbar .navbar-collapse {
                background: rgba(255,255,255,0.92);
                position: absolute;
                top: 60px;
                left: 0;
                width: 100vw;
                box-shadow: 0 4px 16px rgba(0,0,0,0.08);
                padding: 1rem 0;
                z-index: 2000;
                display: flex !important;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 60vh;
                transition: opacity 0.4s cubic-bezier(.4,0,.2,1), transform 0.4s cubic-bezier(.4,0,.2,1);
                opacity: 1;
                transform: translateY(0);
            }
            .custom-navbar .navbar-collapse.collapsing,
            .custom-navbar .navbar-collapse:not(.show) {
                opacity: 0;
                transform: translateY(-30px);
                pointer-events: none;
            }
            .custom-navbar .navbar-nav {
                flex-direction: column !important;
                align-items: center !important;
                width: 100%;
            }
            .custom-navbar .nav-link {
                width: 100%;
                text-align: center;
                padding: 16px 0;
                font-size: 1.2rem;
                color: #157bb0;
                font-weight: 500;
                transition: color 0.2s;
            }
            .custom-navbar .nav-link.active,
            .custom-navbar .nav-link.selected {
                background: #ff9e1b;
                color: #fff !important;
            }
        }
        @media (min-width: 993px) {
            .navbar-toggler {
                display: none !important;
            }
            /* Eliminar control de display de los logos aquí */
            /* #logo-navbar-mobile { display: none !important; } */
            /* #logo-navbar { display: block !important; } */
        }
        /* =====================
           LOGO SUPERIOR DERECHO SIEMPRE VISIBLE
        ===================== */
        .logo-top-right {
            position: absolute;
            top: 20px;
            right: 40px;
            z-index: 10;
            text-align: right;
        }
        .logo-top-right img {
            height: 110px;
            width: auto;
            max-width: 220px;
            object-fit: contain;
            image-rendering: auto;
            cursor: pointer;
        }
        /* NAVBAR ADAPTATIVA */
        .custom-navbar .navbar-toggler {
            border: none;
            background: transparent;
            font-size: 1.5rem;
        }
        /* Cambia el color del icono hamburguesa */
        .custom-navbar .navbar-toggler .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(21,123,176,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        
        @media (min-width: 993px) {
            /* Eliminar control de display de los logos aquí */
            /* #logo-navbar-mobile { display: none !important; } */
            /* #logo-navbar { display: block !important; } */
        }
    </style>
</head>

<body>
    <!-- LOGO EN ESQUINA SUPERIOR DERECHA SIEMPRE VISIBLE Y ENLACE AL INICIO -->
    <div style="position: relative; width: 100vw; max-width: 100vw; overflow: hidden;">
        <a href="#inicio" class="logo-top-right">
            <img id="logo" src="http://emprendo.com.co/eComercial/assets/img/eComercial.png" alt="Logo eComercial">
        </a>
        <div class="video-banner-container" id="inicio">
            <video autoplay loop muted playsinline>
                <source src="https://emprendo.com.co/eComercial/assets/img/bannereCo.mp4" type="video/mp4">
                Tu navegador no soporta el video.
            </video>
            <div class="video-gradient"></div>
        </div>
    </div>

    <!-- BARRA DE NAVEGACIÓN STICKY DEBAJO DEL VIDEO -->
    <nav id="main-navbar"
        class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top custom-navbar"
        style="margin-bottom: 30px; top: 0; z-index: 1050;">
        <div class="container-fluid px-3 d-flex align-items-center justify-content-between flex-row">
            <!-- Logo a la izquierda en móviles -->
            <a id="logo-navbar-mobile" href="#inicio" style="display: none;">
                <img src="http://emprendo.com.co/eComercial/assets/img/eComercial.png" alt="Logo eComercial"
                    style="height: 40px; width: auto; max-width: 100px; object-fit: contain;">
            </a>
            <!-- Botón hamburguesa a la derecha en móviles -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="margin-left:auto;">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Logo centrado en escritorio -->
            <a id="logo-navbar" href="#inicio" style="display: none;">
                <img src="http://emprendo.com.co/eComercial/assets/img/eComercial.png" alt="Logo eComercial"
                    style="height: 60px; width: auto; max-width: 140px; object-fit: contain;">
            </a>
            <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                <ul class="navbar-nav flex-row flex-lg-row justify-content-center w-100">
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#beneficios">Beneficios</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#clientes">Clientes</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#precios">Planes y Precios</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#pagos">Medios de Pago</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#contacto">Contacto</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script>
        // Ocultar logos al cargar la página
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('logo-navbar').style.display = 'none';
            document.getElementById('logo-navbar-mobile').style.display = 'none';
        });
        // Mostrar el logo en la barra solo cuando el video/banner ya no es visible
        function toggleNavbarLogo() {
            var videoBanner = document.getElementById('inicio');
            var logoNav = document.getElementById('logo-navbar');
            var logoNavMobile = document.getElementById('logo-navbar-mobile');
            var rect = videoBanner.getBoundingClientRect();
            // Si la parte inferior del video está por encima del top de la ventana, la barra está sticky
            if (rect.bottom <= 0) {
                if (window.innerWidth < 993) {
                    logoNavMobile.style.display = 'block';
                    logoNav.style.display = 'none';
                } else {
                    logoNav.style.display = 'block';
                    logoNavMobile.style.display = 'none';
                }
            } else {
                logoNav.style.display = 'none';
                logoNavMobile.style.display = 'none';
            }
        }
        window.addEventListener('scroll', toggleNavbarLogo);
        window.addEventListener('resize', toggleNavbarLogo);
        document.addEventListener('DOMContentLoaded', toggleNavbarLogo);

        // Resaltar el botón activo de la barra de navegación según la sección visible (usando getBoundingClientRect)
        const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
        const sections = ['beneficios', 'clientes', 'precios', 'pagos', 'contacto'];
        window.addEventListener('scroll', function () {
            let found = false;
            for (let i = 0; i < sections.length; i++) {
                let section = document.getElementById(sections[i]);
                if (section) {
                    let rect = section.getBoundingClientRect();
                    // Si la parte superior de la sección está por encima de 140px y la parte inferior está por debajo de 200px, la consideramos activa
                    if (rect.top <= 140 && rect.bottom > 200) {
                        navLinks.forEach(link => link.classList.remove('active'));
                        document.querySelector('.navbar-nav .nav-link[href="#' + sections[i] + '"]').classList.add('active');
                        found = true;
                        break;
                    }
                }
            }
            // Si no se encontró ninguna sección activa y estamos al final de la página, resaltar 'Contacto'
            if (!found && (window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 10)) {
                navLinks.forEach(link => link.classList.remove('active'));
                document.querySelector('.navbar-nav .nav-link[href="#contacto"]').classList.add('active');
            }
            if (!found && ((window.innerHeight + window.scrollY) < (document.body.offsetHeight - 10))) {
                navLinks.forEach(link => link.classList.remove('active'));
            }
        });

        // Cerrar el menú hamburguesa automáticamente al hacer clic en una opción (con animación elegante)
        document.querySelectorAll('.navbar-nav .nav-link').forEach(function(link) {
            link.addEventListener('click', function() {
                var navbarCollapse = document.getElementById('navbarNav');
                if (window.innerWidth < 993 && navbarCollapse.classList.contains('show')) {
                    navbarCollapse.classList.remove('show');
                    navbarCollapse.classList.add('collapsing');
                    setTimeout(function() {
                        navbarCollapse.classList.remove('collapsing');
                    }, 400); // Duración de la animación
                }
            });
        });
    </script>

    <button id="stopAudioButton" onclick="stopSound()">
        <i class="fa-solid fa-stop"></i>
    </button>
    <button id="toggleSeekBarButton" onclick="toggleSeekBar()">
        <i class="fa-solid fa-music"></i>
    </button>

    <div style="height: 80px;"></div> <!-- Espacio para la barra de navegación fija -->

    <!-- BENEFICIOS -->
    <section id="beneficios">
        <div class="container py-5">
            <h1 class="text-center" style="padding-top: 40px;">Haz que tu negocio resuene</h1>
        <p class="text-center" style="color: #494949;">Transforma tu marca con contenidos publicitarios de alta
            calidad. Ideal para promocionar tu negocio de manera creativa y efectiva.</p>

        <div class="container px-4 py-5" id="featured-3">
            <!-- <h2 class="pb-2 border-bottom">Beneficios del Producto</h2> -->
            <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
                <div class="feature col">
                    <div
                        class="feature-icon d-inline-flex align-items-center justify-content-center bg-gradient fs-2 mb-3">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Locuciones-Dinamicas.png"
                            alt="Locuciones-Dinamicas" width="80">
                    </div>
                    <h3 class="fs-2 text-body-emphasis">Locuciones Dinámicas</h3>
                    <p>Que captan la atención del público e informan acerca de tu establecimiento comercial</p>
                </div>
                <div class="feature col">
                    <div
                        class="feature-icon d-inline-flex align-items-center justify-content-center bg-gradient fs-2 mb-3">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Ambientes-musicales.png"
                            alt="Ambientes-musicales" width="80">
                    </div>
                    <h3 class="fs-2 text-body-emphasis">Música de Ambiente</h3>
                    <p>Que mejora la experiencia de compra y resalta las bondades de tu establecimiento y sus
                        productos
                        y/o servicios</p>
                </div>
                <div class="feature col">
                    <div
                        class="feature-icon d-inline-flex align-items-center justify-content-center bg-gradient fs-2 mb-3">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Uso-Libre.png" alt="Uso-Libre"
                            width="80">
                    </div>
                    <h3 class="fs-2 text-body-emphasis">Uso libre</h3>
                    <p>De las piezas musicales y locuciones en distintos canales de marketing, adaptándose a las
                        necesidades de cada negocio</p>
                </div>
                <div class="feature col">
                    <div
                        class="feature-icon d-inline-flex align-items-center justify-content-center bg-gradient fs-2 mb-3">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Bajo-Costo.png" alt="Bajo-Costo"
                            width="80">
                    </div>
                    <h3 class="fs-2 text-body-emphasis">Bajo Costo</h3>
                    <p>En comparación de lo que costaría contratar a locutores y músicos en vivo</p>
                </div>
                <div class="feature col">
                    <div
                        class="feature-icon d-inline-flex align-items-center justify-content-center bg-gradient fs-2 mb-3">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Reproducciones-Ilimitadas.png"
                            alt="Reproducciones-Ilimitadas" width="80">
                    </div>
                    <h3 class="fs-2 text-body-emphasis">Reproducción Ilimitada</h3>
                    <p>Cuantas veces lo desees y en múltiples plataformas, sucursales o todo al mismo tiempo</p>
                </div>
                <div class="feature col">
                    <div
                        class="feature-icon d-inline-flex align-items-center justify-content-center bg-gradient fs-2 mb-3">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Variedad-de-Generos.png"
                            alt="Variedad-de-Generos" width="80">
                    </div>
                    <h3 class="fs-2 text-body-emphasis">Variedad de géneros y estilos musicales</h3>
                    <p>Para que elijas la música que más te convenga, pues queremos asegurarte una experiencia
                        personalizada</p>
                </div>
            </div>
        </div>
        </div>
    </section>

    <!-- CLIENTES -->
    <section id="clientes">
        <div class="container py-5">
            <h1 class="text-center" style="padding-top: 40px;">¡Impulsa tu marca y conecta con tus clientes como ellos!
            </h1>

        <div class="row" id="cards-container">
            <!-- Tarjetas aquí (las 5 primeras se mostrarán y el resto estarán ocultas) -->
            <!-- Menta -->
            <div class="col-md-4 card-item">
                <div class="card">
                    <a href="https://emprendo.com.co/eComercial/menta" target="_blank">
                        <img src="https://emprendo.com.co/eComercial/menta/PMentaNovedades.jpg" class="card-img-top"
                            alt="Menta">
                    </a>
                    <div class="card-body">
                        <a href="https://emprendo.com.co/eComercial/menta" target="_blank">
                            <h5 class="card-title">Menta Novedades</h5>
                        </a>
                        <h6 class="card-subtitle mb-2 text-muted">Tienda de Novedades</h6>
                            <p class="card-text">Todo lo que buscas lo encuentras en Menta Novedades. Novedad e
                                Innovación.
                        </p>
                        <p><strong>Dirección:</strong> Calle 10 av 7ma, Cúcuta, Norte de Santander</p>
                        <p><strong>Teléfono:</strong> 3027426920</p>

                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/menta/SMentaNovedades.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/menta/MMentaMenta.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>

            <!--ModaCell-->
            <div class="col-md-4 card-item">
                <div class="card">
                    <a href="https://emprendo.com.co/eComercial/modacell" target="_blank">
                        <img src="https://emprendo.com.co/eComercial/modacell/ModaCell.png" class="card-img-top"
                            alt="modacell">
                    </a>
                    <div class="card-body">
                        <a href="https://emprendo.com.co/eComercial/modacell" target="_blank">
                            <h5 class="card-title">Modacell</h5>
                        </a>
                        <h6 class="card-subtitle mb-2 text-muted">Tienda de Tecnología</h6>
                        <p class="card-text">Venta de accesorios y tecnología al mayor y detal.</p>
                        <p><strong>Dirección:</strong> Calle 9#4-39, Centro, Cúcuta, Norte de
                            Santander</p>
                        <p><strong>Teléfono:</strong> 3108066519</p>

                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/modacell/TuSolución.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/modacell/ModaCell.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>
            
            <!--INTERCONTINENTAL-->
            <div class="col-md-4 card-item">
                <div class="card">
                    <a href="https://emprendo.com.co/eComercial/intercontinental" target="_blank">
                    <img src="https://emprendo.com.co/eComercial/intercontinental/intercontinental.jpg"
                        class="card-img-top" alt="intercontinental">
                    </a>
                    <div class="card-body">
                        <a href="https://emprendo.com.co/eComercial/intercontinental" target="_blank">
                        <h5 class="card-title">Intercontinental Technology</h5>
                        </a>
                        <h6 class="card-subtitle mb-2 text-muted">Tienda de Tecnología</h6>
                        <p class="card-text">Innovación sin fronteras. Somos más que una tienda de tecnología. Todo
                            en
                            un solo lugar.</p>
                        <p><strong>Dirección:</strong> Calle 8 #04-75, Centro, Cúcuta, Norte de
                            Santander</p>
                        <p><strong>Teléfono:</strong> 3204300341</p>

                            <!--<button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                onclick="playSound('https://emprendo.com.co/eComercial/modacell/Matrimonio.mp3')"><i
                    class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->


                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/intercontinental/IntercontinentalTechnology.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>

            <!-- Negro Burguer -->
            <div class="col-md-4 card-item">
                <div class="card">
                    <a href="https://emprendo.com.co/eComercial/negroBurger" target="_blank">
                    <img src="https://emprendo.com.co/eComercial/negroBurger/Negro.jpg" class="card-img-top"
                        alt="negro"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/negroBurger" target="_blank">
                                <h5 class="card-title">Negro Burger</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Restaurante Comida Rápida</h6>
                        <p class="card-text">Descubre los auténticos sabores de la comida rápida</p>
                        <p><strong>Dirección:</strong> Cl. 17 #1E - 07, Los Caobos, Cúcuta, Norte de Santander</p>
                        <p><strong>Teléfono:</strong> 317 3580761</p>

                            <!-- <button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('')"><i
                                class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/negroBurger/LaChispaqueEnciende.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>
            
            <!-- Tapitas -->
            <div class="col-md-4 card-item">
                <div class="card">
                    <a href="https://emprendo.com.co/eComercial/tapitas" target="_blank">
                    <img src="https://emprendo.com.co/eComercial/tapitas/Tapitas.jpg" class="card-img-top"
                        alt="negro"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/tapitas" target="_blank">
                                <h5 class="card-title">Restaurante Tapitas</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Restaurante Comida Rápida</h6>
                        <p class="card-text">¡Atrévete a disfrutar de una experiencia diferente!</p>
                        <p><strong>Dirección:</strong> Av. 1 Este, Los Caobos, Cúcuta, Norte de Santander</p>
                        <p><strong>Teléfono:</strong> 323 2106055</p>

                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/tapitas/SpotTapitasv2.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/tapitas/Tapitas1.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>
            
            
            <!-- Montaña Deli Café -->
            <div class="col-md-4 card-item">
                <div class="card">
                    <a href="https://emprendo.com.co/eComercial/montaña" target="_blank">
                            <img src="https://emprendo.com.co/eComercial/montaña/MontañaDeliCafe.jpg"
                                class="card-img-top" alt="montaña"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/montaña" target="_blank">
                                <h5 class="card-title">Montaña Deli Café</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Café</h6>
                            <p class="card-text">Sensibilizamos y transportamos a nuestras raíces de Colombia. ¡Montaña
                                deli café un buen momento!</p>
                        <p><strong>Dirección:</strong> 
Av. 1 Este #16 - 46 local 102, Los Caobos, Cúcuta, Norte de Santander</p>
                        <p><strong>Teléfono:</strong> 312 4265156</p>

                            <!-- <button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('')"><i
                                class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/montaña/MontañaDeliCafe.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
            <!-- Asados Llaneros Gran Colombiano -->
            <div class="col-md-4 card-item">
                <div class="card">
                    <a href="https://emprendo.com.co/eComercial/GranColombiano" target="_blank">
                    <img src="https://emprendo.com.co/eComercial/GranColombiano/GC.png" class="card-img-top"
                        alt="montaña"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/GranColombiano" target="_blank">
                                <h5 class="card-title">Asados Llaneros Gran Colombiano</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Restaurante</h6>
                        <p class="card-text">Puro Sabor Colombiano!</p>
                        <p><strong>Dirección:</strong> 
Cali, calle cuarta número 26 A-74, San Fernando</p>
                        <p><strong>Teléfono:</strong> 304 4221129 / 321 5237736</p>

                            <!-- <button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('')"><i
                                class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/GranColombiano/¡Qué cosa más buena!v3.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
            <!-- Kairos Express -->
            <div class="col-md-4 card-item">
                <div class="card">
                    <a href="https://emprendo.com.co/eComercial/kairos" target="_blank">
                    <img src="https://emprendo.com.co/eComercial/kairos/KairosExpress.png" class="card-img-top"
                        alt="montaña"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/kairos" target="_blank">
                                <h5 class="card-title">Kairos Express</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Restaurante</h6>
                        <p class="card-text">El tiempo perfecto de poner a Disfrutar tu Paladar</p>
                        <p><strong>Dirección:</strong> 
Av. 9 Este, Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 300 4795191</p>

                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/kairos/SpotKairos.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/kairos/KairosExpress.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
            <!-- Los Patrones -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                    <img src="https://emprendo.com.co/eComercial/lospatrones/LosPatrones.jpg" class="card-img-top"
                        alt="montaña">
                    <div class="card-body">
                        <h5 class="card-title">Los Patrones</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Restaurante Mexicano</h6>
                            <p class="card-text">No somos los únicos pero somos los mejores primera Taquería callejera
                                de la ciudad de Cúcuta</p>
                        <p><strong>Dirección:</strong> 
Jardín plaza, Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 300 4187484</p>

                            <!-- <button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('')"><i
                                class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/lospatrones/LosPatrones.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
            <!-- El Anafe -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/anafe" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/anafe/ElAnafe.png" class="card-img-top"
                        alt="anafe"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/anafe" target="_blank">
                                <h5 class="card-title">El Anafe</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Restaurante</h6>
                        <p class="card-text">
Con el toque ahumado que tanto les gusta</p>
                        <p><strong>Dirección:</strong> 

Av 7e #4N33, Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 3138548506</p>

                            <!-- <button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('')"><i
                                class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/anafe/ElAnafe.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
              <!-- Aguita e' Coco -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/Aguitaecoco" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/Aguitaecoco/Aguitaecoco.jpg"
                                class="card-img-top" alt="anafe"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/Aguitaecoco" target="_blank">
                                <h5 class="card-title">Aguita e' Coco</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Snack Bar</h6>
                        <p class="card-text">
Cevichería de autor</p>
                        <p><strong>Dirección:</strong> 

Cl. 17 #0e - 37, Los Caobos, Cúcuta, Norte de Santander</p>
                        <p><strong>Teléfono:</strong> 3007209539</p>

                            <!-- <button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('')"><i
                                class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/Aguitaecoco/AguitaeCoco.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
            
            <!-- Te Guste -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/teguste" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/teguste/TeGuste.jpg" class="card-img-top"
                        alt="anafe"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/teguste" target="_blank">
                                <h5 class="card-title">Te Guste</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Heladería</h6>
                        <p class="card-text">
Helados, Malteadas, Café, Galletas y Postres</p>
                        <p><strong>Dirección:</strong> 

Calle 10 1-37 local 2, Centro, Cúcuta, Norte de Santander</p>
                        <p><strong>Teléfono:</strong> 3219655497</p>

                            <!-- <button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('')"><i
                                class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/teguste/TeGuste.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
            <!-- Lara -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/lara" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/lara/lara.jpg" class="card-img-top"
                        alt="anafe"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/lara" target="_blank">
                                <h5 class="card-title">Multi Aseo Lara</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Productos de Aseo y Limpieza</h6>
                        <p class="card-text">
De Salazar para el mundo. Orgullosamente de Salazar de las Palmas</p>
                        <p><strong>Dirección:</strong> 


Calle 13 entre avenida 5ta y 4ta #4-23, Centro, Cúcuta, Norte de Santander</p>
                        <p><strong>Teléfono:</strong> 
3112763265</p>

                            <!-- <button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('')"><i
                                class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/lara/Lara.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
            <!-- Reals -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/reals" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/reals/Reals.jpg" class="card-img-top"
                        alt="anafe"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/reals" target="_blank">
                                <h5 class="card-title">Reals</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Estudio Creativo</h6>
                        <p class="card-text">
                                Mugs personalizados, camisetas, logotipos. Creación de imágenes para RRSS, Servicios de
                                impresiones como vililos y pendones, stickers</p>
                        <p><strong>Dirección:</strong> 



Av. 4 A Este #0-55, Barrio La ceiba, Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong>
3209042986</p>

                            <!-- <button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('')"><i
                                class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 -->
                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/reals/Reals.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
                        <!-- El Perro Feroz -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/perroferoz" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/perroferoz/perroferoz.png" class="card-img-top"
                        alt="perroferoz"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/perroferoz" target="_blank">
                                <h5 class="card-title">El Perro Feroz</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Comida Rápida</h6>
                        <p class="card-text">
                                Hamburguesas, Perros Calientes y bebidas top a un precio increíble. Explosión de Sabor
                                para un apetito feroz </p>
                        <p><strong>Dirección:</strong> 



Barrio la Libertad, Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong>
3202387004</p>

                            <!-- <button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('')"><i
                                class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/perroferoz/Feroz.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
            <!-- Sr. Pastel -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/srpastel" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/srpastel/srpastel.png" class="card-img-top"
                        alt="srpastel"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/srpastel" target="_blank">
                                <h5 class="card-title">Sr. Pastel</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Comida & Bebida</h6>
                        <p class="card-text">
Una experiencia gastronómica, dentro de un pastel</p>
                            <p><strong>Dirección:</strong>Av 12e#0 quinta oriental, Cúcuta, Norte de Santander, Colombia
                            </p>
                        <p><strong>Teléfono:</strong>
3181110000</p>

                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/srpastel/SPOT%20Sr.%20Pastel.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/srpastel/JINGLE%20Sr.%20Pastel.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
            <!-- Emprendedores del Reino -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/reino" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/reino/reino.png" class="card-img-top"
                        alt="reino"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/reino" target="_blank">
                                <h5 class="card-title">Emprendedores del Reino</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Formación en Negocios y Finanzas</h6>
                        <p class="card-text">
Un Oasis en Medio de la semana</p>
                        <p><strong>Dirección:</strong>
                                Avenida 9 Este No. 5 Norte - 10 Los Pinos, Barrio Ceiba 2, Cúcuta, Norte de Santander,
                                Colombia</p>
                        <p><strong>Teléfono:</strong>
3102542255</p>

                        

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/reino/JINGLE%20Sr.%20Pastel.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
            <!-- Votum -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/votum" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/votum/votum.png" class="card-img-top"
                        alt="reino"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/votum" target="_blank">
                                <h5 class="card-title">Votum</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Ropa Deportiva</h6>
                        <p class="card-text">
No es solo ropa. Es una forma de volver a ti</p>
                        <p><strong>Dirección:</strong>
                                Barrio obrero carrera 22 C.C SAO Bento PB L-07, San Cristóbal 5001, Táchira, Venezuela</p>
                        <p><strong>Teléfono:</strong>
+58 4147389894</p>

                        

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/votum/Vuelve%20a%20tu%20Esencia.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
               <!-- Centro Cristiano -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/centrocristiano" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/centrocristiano/cc.png" class="card-img-top"
                        alt="centrocristiano"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/centrocristiano" target="_blank">
                                <h5 class="card-title">Centro Cristiano</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Iglesia Cristiana.</h6>
                        <p class="card-text">
Influenciamos generaciones con pasión y transformamos la sociedad haciendo misiones.</p>
                        <p><strong>Dirección:</strong>
                                Avenida 9 Este No. 5 Norte - 10 Los Pinos, Barrio Ceiba 2, Cúcuta, Norte de Santander,
                                Colombia</p>
                        <p><strong>Teléfono:</strong>
3222787000</p>

                        

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/centrocristiano/MisionGlobal.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>
            
               <!-- Floristería Motivos -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/motivos" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/motivos/motivos.jpg" class="card-img-top"
                        alt="centrocristiano"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/motivos" target="_blank">
                                <h5 class="card-title">Floristería Motivos</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Hogar y Decoracion</h6>
                        <p class="card-text"> 
Importadores directos de China los mejores precios a nivel de Cúcuta y Nacional. Arreglos florales naturales y artificiales, exclusividad. Innovación y con los mejores precios.</p>
                        <p><strong>Dirección:</strong>
                                Avenida 9 Este No. 5 Norte - 10 Los Pinos, Barrio Ceiba 2, Cúcuta, Norte de Santander,
                                Colombia</p>
                        <p><strong>Teléfono:</strong> 3222787000</p>

                        

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/motivos/MotivosdeNavidad1.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción 1</strong>
                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/motivos/MotivosdeNavidad2.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción 2</strong>
                    </div>
                </div>
            </div>
            
            <!-- Key Pao Cell -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/keypaocell" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/keypaocell/keypaocell.png" class="card-img-top"
                        alt="centrocristiano"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/keypaocell" target="_blank">
                                <h5 class="card-title">Key Pao Cell</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Tecnología</h6>
                        <p class="card-text"> 
Celulares y Accesorios, juguetería para la navideña, patinetas, productos de televentas, parlantes</p>
                        <p><strong>Dirección:</strong>
                                Cl. 13 & Av. 7, Br. Pan Americano, Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 3142312299</p>

                        

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/keypaocell/keypaocella.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción 1</strong>
                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/keypaocell/keypaocellb.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción 2</strong>
                    </div>
                </div>
            </div>
            
            <!-- Shenlong House -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/shenlonghouse" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/shenlonghouse/shenlonghouse.png" class="card-img-top"
                        alt="centrocristiano"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/shenlonghouse" target="_blank">
                                <h5 class="card-title">Shenlong House</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Restaurante</h6>
                        <p class="card-text"> 

Restaurante ShenLong House la casa del dragón</p>
                        <p><strong>Dirección:</strong>
                                Cl. 13 & Av. 7, Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 3142312299</p>

                        

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/shenlonghouse/shenlongb.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Desayunos</strong>
                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/shenlonghouse/shenongalmuerzos.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Almuerzos</strong>
                    </div>
                </div>
            </div>
            
            <!-- Chorizón -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/chorizon" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/chorizon/chorizon.png" class="card-img-top"
                        alt="chorizon"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/chorizon" target="_blank">
                                <h5 class="card-title">Chorizón</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Comida Rápida</h6>
                        <p class="card-text"> 
                        Chorizos, hamburguesas picadas y choripan. Se hacen a la parrilla, al barril y al carbon</p>
                        <p><strong>Dirección:</strong>
                                
Av 6ta entre calles 16 y 17, Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 3003673216</p>
        </div>
                </div>
            </div>
            
            <!-- cinux -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/cinux" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/cinux/cinuxa.png" class="card-img-top"
                        alt="cinux"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/cinux" target="_blank">
                                <h5 class="card-title">Cinux Import</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Productos de Televentas</h6>
                        <p class="card-text"> 
                        Somos Importadores de China, Artículos de belleza, tecnología, electrodomésticos, y juguetes </p>
                        <p><strong>Dirección:</strong>
                                

Av 6ta entre calles 11A y 12, Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 322-8234863</p>
                        

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/cinux/cinuxa.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Navidad 1</strong>
                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/cinux/cinuxb.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Navidad 2</strong>
                    </div>
                </div>
            </div>
             <!-- Equivalente -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/equivalente" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/equivalente/equivalenteA.png" class="card-img-top"
                        alt="chorizon"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/equivalente" target="_blank">
                                <h5 class="card-title">Equivalente</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Fragancias que inspiran</h6>
                        <p class="card-text"> 
                        fragancias y aromas que elevan. Perfumes y Ambientadores que aromatizan espacios y reflejan su estilo de vida</p>
                        <p><strong>Dirección:</strong>
                                

Av 12 #9-90, Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 3143039577</p>

                        <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/equivalente/bossa-equivalente.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Bossa Nova</strong>
                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/equivalente/jazz-equivalente.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Jazz</strong>
                    </div>
                </div>
            </div>
            
                         <!-- OleMita -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/olemita" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/olemita/olemita.png" class="card-img-top"
                        alt="olemita"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/olemita" target="_blank">
                                <h5 class="card-title">Ole Mita</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Snacks y Dulces Mexicanos</h6>
                        <p class="card-text"> 
                        Maracumangos, helados, dulces Mexicanos, sodas y gaseosas de muchos sabores y dulces enchilados</p>
                        <p><strong>Dirección:</strong>
                                
Avenida 12 #20-03, Barrio La Libertad. Cúcuta, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 3145197963</p>

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/olemita/olemita1.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Ole Mita</strong>
                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/olemita/olemitaexpo.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Expo Sabor</strong>
                    </div>
                </div>
            </div>
            <!-- Belen -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/belen" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/belen/belen.jpg" class="card-img-top"
                        alt="belen"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/belen" target="_blank">
                                <h5 class="card-title">Sabores Belén</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Cafetería</h6>
                        <p class="card-text"> 
                        La experiencia de sabor, estar tranquilos, sentarse. El Lugar inspira Paz</p>
                        <p><strong>Dirección:</strong>
                                
Av. 10, Los Patios, Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 3222128111</p>

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/olemita/jinglebelen.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Jingle Belén 1</strong>
                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/olemita/olemitaexpo.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción 1</strong>
                    </div>
                </div>
            </div>
            <!-- Perritos a la Lata -->
            <div class="col-md-4 card-item">
                <div class="card">
                    
                        <a href="https://emprendo.com.co/eComercial/perritosalalata" target="_blank"><img
                                src="https://emprendo.com.co/eComercial/perritosalalata/perritosalalatah.png" class="card-img-top"
                        alt="perritos"></a>
                    <div class="card-body">
                            <a href="https://emprendo.com.co/eComercial/perritosalalata" target="_blank">
                                <h5 class="card-title">Perritos a la Lata</h5>
                            </a>
                        <h6 class="card-subtitle mb-2 text-muted">Comida Rápida</h6>
                        <p class="card-text"> 
                        Somos una empresa de comida callejera pero de sabores Gourmets</p>
                        <p><strong>Dirección:</strong>
                                
Los Patios a 150 metros del km 8. Norte de Santander, Colombia</p>
                        <p><strong>Teléfono:</strong> 3017457049</p>

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/perritosalalata/perritosalalata1.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción 1</strong>
                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/perritosalalata/perritosalalata2.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción 2</strong>
                    </div>
                </div>
            </div>
            <!-- Sabor Cúcuta -->
            <div class="col-md-4 hidden-card">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/muestras/PSaborCucuta.jpg" class="card-img-top"
                        alt="Restaurante">
                    <div class="card-body">
                        <h5 class="card-title">Sabor Cúcuta</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Restaurante</h6>
                        <p class="card-text">Disfruta de la mejor gastronomía local en Sabor Cúcuta. Platos
                            tradicionales que te harán sentir como en casa.</p>
                        <p><strong>Dirección:</strong> Avenida principal de las americas, Cl 16 Nte. #18-10, Cúcuta,
                            Norte de Santander</p>
                        <p><strong>Teléfono:</strong> 313-34979732</p>

                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/SSaborCucuta.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/MSaborCucuta.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>

            <!-- Resto de tarjetas (ocultas inicialmente) -->
            <!-- Mundo Mágico -->
            <div class="col-md-4 card-item hidden-card">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/muestras/PMundoMagico.jpg" class="card-img-top"
                        alt="Juguetería Mundo Mágico">
                    <div class="card-body">
                        <h5 class="card-title">Juguetería Mundo Mágico</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Tienda de Juguetes</h6>
                            <p class="card-text">Descubre un mundo de diversión en Juguetería Mundo Mágico. Ofrecemos
                                una
                            amplia gama de juguetes para todas las edades.</p>
                        <p><strong>Dirección:</strong> Cra. 54 #45 A 38 P 1, La Candelaria, Medellín, Antioquia</p>
                        <p><strong>Teléfono:</strong> 317-43399574</p>

                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/SMundoMagico.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/MMundoMagico.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>

            <!-- Moda Urbana -->
            <div class="col-md-4 card-item hidden-card">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/muestras/PModaUrbana.jpg" class="card-img-top"
                        alt="Tienda de Ropa">
                    <div class="card-body">
                        <h5 class="card-title">Moda Urbana</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Tienda de Ropa</h6>
                        <p class="card-text">Moda Urbana ofrece las últimas tendencias en ropa y accesorios para
                            jóvenes. Visítanos para encontrar tu estilo.</p>
                            <p><strong>Dirección:</strong> Av. 2 #268, Barrio El Aeropuerto, Cúcuta, Norte de Santander
                            </p>
                        <p><strong>Teléfono:</strong> 304-61060367</p>
                        <!-- <p><strong>Spot Publicitario:</strong></p> -->
                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/SModaUrbana.mp3')"><i
                                    class="fa-solid fa-play"></i></button>
                        <strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/MModaUrbana.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>

            <!--Café de Parque-->
            <div class="col-md-4 hidden-card">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/muestras/PCafedelParque.jpg" class="card-img-top"
                        alt="Cafetería">
                    <div class="card-body">
                        <h5 class="card-title">Café del Parque</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Cafetería</h6>
                        <p class="card-text">Café del Parque es el lugar ideal para disfrutar de un buen café y un
                            ambiente acogedor. ¡Ven a relajarte!</p>
                        <p><strong>Dirección:</strong> Avenida 4 #1-20 KDX 107, Chinácota, Norte de Santander</p>
                        <p><strong>Teléfono:</strong> 322-86721155</p>

                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/SCafedelParque.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/MCafedelParque.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>

            <!--TechZone-->
            <div class="col-md-4 hidden-card">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/muestras/PTechZone.jpg" class="card-img-top" alt="TechZone">
                    <div class="card-body">
                        <h5 class="card-title">TechZone</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Tienda de Tecnología</h6>
                        <p class="card-text">En TechZone encontrarás los últimos gadgets y dispositivos
                            tecnológicos.
                            ¡Ven y descubre lo mejor en tecnología!</p>
                        <p><strong>Dirección:</strong> #0- a Avenida Gran Colombia No. 12E-96, Cúcuta, Norte de
                            Santander</p>
                        <p><strong>Teléfono:</strong> 607-57766055</p>

                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/STechZone.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/MTechZone.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>
                    </div>
                </div>
            </div>

            <!--JM Toys-->
            <div class="col-md-4 hidden-card">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/muestras/PJM Toys.png" class="card-img-top" alt="TechZone">
                    <div class="card-body">
                        <h5 class="card-title">JM Toys</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Tienda de Juguetes</h6>
                        <p class="card-text">El Rey de los juguetes en Cúcuta.</p>
                        <p><strong>Dirección:</strong> Av. 6 #9-61 Centro, Cúcuta, Norte de
                            Santander</p>
                        <p><strong>Teléfono:</strong> 607-5481346 o 321-3007524</p>

                            <button class="btn btn-primary" style="background-color: #1a96d3; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/STuCastilloSoy.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/muestras/MTuCastilloSoy.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>

            <!--MUNDO FIESTA-->
            <div class="col-md-4 hidden-card">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/mundofiesta/mundofiesta.jpg"
                                class="card-img-top" alt="mundofiesta">
                    <div class="card-body">
                        <h5 class="card-title">Mundo Fiesta</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Tienda de Variedades</h6>
                        <p class="card-text">Piñateria, Globos, Detalles y Decoración</p>
                        <p><strong>Dirección:</strong> Avenida 6ta #07-01, Centro, Cúcuta, Norte de
                            Santander</p>
                        <p><strong>Teléfono:</strong> 3053266006</p>

                            <!--<button class="btn btn-play" style="background-color: #1a96d3; color: white;"
                        onclick="playSound('https://emprendo.com.co/eComercial/modacell/Matrimonio.mp3')"><i
                            class="fas fa-play"></i></button><strong>Spot</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->


                            <button class="btn" style="background-color: #ff9e1b; color: white;"
                            onclick="playSound('https://emprendo.com.co/eComercial/mundofiesta/mundofiesta.mp3')"><i
                                    class="fa-solid fa-play"></i></button><strong>Canción</strong>

                    </div>
                </div>
            </div>

            
        </div>

        <!-- Botón Ver más -->
        <div class="col-md-12 text-center">
            <button id="btn-see-more" class="btn btn-primary" onclick="toggleCards()">Ver más</button>
        </div>
    </div>
    </section>

    <!-- PLANES Y PRECIOS -->
    <section id="precios">
    <div class="container py-5">
            <h1 class="text-center" style="padding-top: 40px;">Planes y Precios</h1>
        <div class="row">

            <!-- Anuncio de Audio -->
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-header text-center">
                        <h5 class="card-title">Anuncio de Audio</h5>
                    </div>
                    <div class="card-body">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Spots.png" alt="Canciones"
                            style="display: block; margin: 0 auto;" height="100">
                        <h2 class="text-center">$ 200.000</h2>
                        <p class="text-center text-muted" style="font-style: italic;">Duración: Menos de un Minuto </p>
                        <br>
                        <p class="text-center">Mensaje publicitario diseñado para captar la atención del oyente y transmitir una idea, producto o servicio de forma clara, breve y memorable.</p>
                    </div>
                </div>
            </div>
            <!-- Canciones Temáticas -->
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-header text-center">
                        <h5 class="card-title">Jingle</h5>
                    </div>
                    <div class="card-body">
                        <img src="http://emprendo.com.co/eComercial/assets/img/Canciones.png" alt="Canciones"
                            style="display: block; margin: 0 auto;" height="100">
                        <h2 class="text-center">$ 200.000</h2>
                        <p class="text-center text-muted" style="font-style: italic;">Duración: Menos de un Minuto </p>
                        <br>
                        <p class="text-center">Fragmento musical pegajoso de hasta 1 minuto, ideal para anuncios, radio, videos cortos y redes.</p>
                    </div>
                </div>
            </div>
            <!-- Videos -->
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-header text-center">
                        <h5 class="card-title">Canción de Marca</h5>
                    </div>
                    <div class="card-body">
                        <img src="https://emprendo.com.co/eComercial/assets/img/Video.png" alt="Canciones"
                            style="display: block; margin: 0 auto;" height="100">
                        <h2 class="text-center">$ 250.000</h2>
                        <p class="text-center text-muted" style="font-style: italic;">Duración: Superior a un Minuto</p>
                        <br>
                        <p class="text-center">Pieza musical completa, perfecta para usar como música de ambiente en tu tienda o local, contar tu historia en videos corporativos, eventos y presentaciones, o descripción creativa de productos</p>
                    </div>
                </div>
            </div>

            <br>

            <!-- Plan Básico -->
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-header text-center" style="background-color: #2ac1b2;">
                        <h4 class="card-title" style="color: white;">Plan Básico</h4>
                    </div>
                    <div class="card-body">
                        <h2 class="text-center" style="color: #dc3545;"><del>$2.0000.000</del></h2>
                        <h1 class="text-center">$1.800.000</h1>
                        <h3 class="text-center" style="color: #28a745;">10% DESCUENTO</h3>
                        <ul class="list-unstyled">
                            <li>💡 5 Anuncios de Audio</li>
                            <li>💡 5 Jingles</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Plan Premium -->
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-header text-center" style="background-color: #ffc107">
                        <h4 class="card-title" style="color: black;">Plan Premium</h4>
                    </div>
                    <div class="card-body">
                        <h2 class="text-center" style="color: #dc3545;"><del>$4.700.000</del></h2>
                        <h1 class="text-center">$3.995.000</h1>
                        <h3 class="text-center" style="color: #28a745;">15% DESCUENTO</h3>
                        <ul class="list-unstyled">
                            <li>💎 10 Anuncios de Audio</li>
                            <li>💎 10 Canciones de Marca</li>
                            <li>💎 1 Jingle</li>

                        </ul>
                    </div>
                </div>
            </div>
            <!-- Plan Personalizado -->
            <div class="col-md-4 mb-4">
                <div class="card h-100">
                    <div class="card-header text-center" style="background-color: #ff6b6b;">
                        <h4 class="card-title" style="color: white;">Plan Personalizado</h4>
                    </div>
                    <div class="card-body">
                        <h3 class="text-center">Montos superiores a</h3>
                        <h2 class="text-center" style="color: #dc3545;"><del>$4.700.000</del></h2>
                        <h3 class="text-center" style="color: #28a745;">20% DESCUENTO</h3>

                        <p class="text-center" style="font-style: italic;">Elige tus cantidades</p>
                        <ul class="list-unstyled">
                            <li>⭐ Anuncios de Audio</li>
                            <li>⭐ Jingles</li>
                            <li>⭐ Canciones Marca</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>

    <!-- MEDIOS DE PAGO -->
    <section id="pagos">
        <div class="container py-5">
            <h1 class="text-center" style="padding-top: 40px;">Medios de Pago</h1>
        <p class="text-center text-muted">Selecciona el método que prefieras para realizar tu pago</p>
        <div class="row text-center">
            <div class="col-md-4">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/mediospago/Bancolombia.png" class="card-img-mp"
                        alt="Bancolombia">
                    <div class="card-body">
                        <h5 class="card-title">Bancolombia</h5>
                        <p class="card-text">
                            Cuenta de Ahorros<br>
                            <strong>816-626052-04</strong><br>
                            Titular: Nevin Cristopher Paredes Rojas
                        </p>
                        <p>
                            <strong>Escanea el código QR:</strong><br>
                            <img src="https://emprendo.com.co/eComercial/mediospago/Bancolombia-qr.png" height="280"
                                alt="QR Bancolombia">
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/mediospago/Daviplata.png" class="card-img-mp"
                        alt="Daviplata">
                    <div class="card-body">
                        <h5 class="card-title">Daviplata</h5>
                        <p class="card-text">
                            Número: <strong>3143604300</strong><br>
                            Titular: Cynthia Carolina Simancas Febres
                        </p>
                        <p>
                            <strong>Escanea el código QR:</strong><br>
                            <img src="https://emprendo.com.co/eComercial/mediospago/Daviplata-qr.png" height="280"
                                alt="QR Daviplata">
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                        <img src="https://emprendo.com.co/eComercial/mediospago/Nequi.png" class="card-img-mp"
                            alt="Nequi">
                    <div class="card-body">
                        <h5 class="card-title">Nequi</h5>
                        <p class="card-text">
                            Número: <strong>3143604300</strong><br>
                            Titular: Cynthia Carolina Simancas Febres
                        </p>
                        <p>
                            <strong>Escanea el código QR:</strong><br>
                            <img src="https://emprendo.com.co/eComercial/mediospago/Nequi-qr.png" height="280"
                                alt="QR Nequi">
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/mediospago/BancoUnion.png" class="card-img-mp"
                        alt="Banco Unión">
                    <div class="card-body">
                        <h5 class="card-title">Banco Unión</h5>
                        <p class="card-text">
                            Cuenta de Ahorros<br>
                            <strong>01735600000428795</strong><br>
                            Titular: Cynthia Carolina Simancas Febres
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                        <img src="https://emprendo.com.co/eComercial/mediospago/Uala.png" class="card-img-mp"
                            alt="Ualá">
                    <div class="card-body">
                        <h5 class="card-title">Ualá</h5>
                        <p class="card-text">
                            Número: <strong>825231002097930</strong><br>
                            Titular: Nevin Cristopher Paredes Rojas
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src="https://emprendo.com.co/eComercial/mediospago/Efectivo.png" class="card-img-mp"
                        alt="Efectivo">
                    <div class="card-body">
                        <h5 class="card-title">Efectivo</h5>
                        <p class="card-text">
                            Disponible con nuestro<br>
                            <strong>Asesor de Ventas</strong>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>

    <!-- Contacto -->
    <section id="contacto" class="fade-in" style="background: #1a96d3; color: #fff; padding: 80px 0 80px 0;">
        <div class="container">
            <div class="contact-info text-center mb-4"
                style="display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;align-items:center;">
                <div class="contact-item">
                    <i class="fa-solid fa-envelope contact-icon" style="color:#ff9e1b;font-size:1.5rem;"></i>
                    <a href="mailto:ecomercial@emprendo.com.co"
                        style="color:#fff; margin-left:6px;">ecomercial@emprendo.com.co</a>
                </div>
                <div class="contact-item">
                    <i class="fa-brands fa-youtube contact-icon" style="color:#FF0000;font-size:1.5rem;"></i>
                    <a href="https://www.youtube.com/@eComercial_co" target="_blank"
                        style="color:#fff; margin-left:6px;">@eComercial_co</a>
                </div>
                <div class="contact-item">
                    <i class="fa-brands fa-instagram contact-icon" style="color:#C13584;font-size:1.5rem;"></i>
                    <a href="https://www.instagram.com/ecomercial_co/" target="_blank"
                        style="color:#fff; margin-left:6px;">@ecomercial_co</a>
                </div>
            </div>
            <div class="contact-info text-center mb-4"
                style="display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;align-items:center;">
                <div class="contact-item">
                    <i class="fa-brands fa-whatsapp contact-icon" style="color:#25D366;font-size:1.5rem;"></i>
                    <a href="https://wa.me/573028424064" target="_blank" style="color:#fff; margin-left:6px;">+57 302
                        842 40 64</a>
                </div>
                <div class="contact-item">
                    <i class="fa-brands fa-whatsapp contact-icon" style="color:#25D366;font-size:1.5rem;"></i>
                    <a href="https://wa.me/573143604300" target="_blank" style="color:#fff; margin-left:6px;">+57 314
                        360 43 00</a>
                </div>
            </div>
            <div class="contact-info text-center"
                style="display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;align-items:center;">
                <div class="contact-item">
                    <i class="fa-solid fa-location-dot contact-icon" style="color:#fff;font-size:1.5rem;"></i>
                    <a href="https://maps.app.goo.gl/5UEQfFRH3YrRf4dC6" target="_blank"
                        style="color:#fff; margin-left:6px;">
                        Cl. 17 entre avenidas 5ta y 6ta. #5A-32, La Cabrera, Cúcuta
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer Moderno -->
    <footer class="footer-modern" style="background: #157bb0; color: #fff; padding: 30px 0 30px 0; margin-top:0;">
        <div class="container"
            style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;">
            <div class="footer-logo">
                <a href="#inicio"><img src="assets/img/logotipo_negativo.svg" alt="Logo CyNe Producciones - El Poder de la Palabra"
                        style="height: 60px; width:auto; max-width:180px; object-fit:contain;"></a>
            </div>
            <div style="text-align:center;flex:1;">
                <h5 class="mb-1" style="margin:0;font-weight:bold;letter-spacing:1px;">Haz eCo de tu marca</h5>
                <p class="mb-0" style="margin:0;">&copy; CyNe Producciones 2025</p>
            </div>
            <!-- <div style="text-align:right;display:flex;gap:1rem;align-items:center;">
                <a href="https://www.instagram.com/cyneproducciones/" target="_blank" title="Instagram">
                    <i class="fa-brands fa-instagram" style="color:#C13584;font-size:1.7rem;"></i>
                </a>
                <a href="https://www.youtube.com/@elpoderdelapalabra4942" target="_blank" title="YouTube">
                    <i class="fa-brands fa-youtube" style="color:#FF0000;font-size:1.7rem;"></i>
                </a>
                <a href="https://wa.me/573028424064" target="_blank" title="WhatsApp">
                    <i class="fa-brands fa-whatsapp" style="color:#25D366;font-size:1.7rem;"></i>
                </a>
            </div> -->
        </div>
    </footer>

    <div id="globalAudioSeekContainer">
        <input type="range" id="globalAudioSeek" value="0" min="0" max="100" step="1" onchange="seekAudio(this.value)">
    </div>

    <script>
        let currentAudio = null;
        let globalSeekInterval = null;

        function playSound(soundFile) {
            if (currentAudio) {
                currentAudio.pause();
            }
            currentAudio = new Audio(soundFile);
            currentAudio.play();
            updateGlobalSeek();
        }

        function stopSound() {
            if (currentAudio) {
                currentAudio.pause();
                currentAudio.currentTime = 0;
            }
        }

        function seekAudio(value) {
            if (currentAudio) {
                const duration = currentAudio.duration;
                currentAudio.currentTime = (value / 100) * duration;
            }
        }

        // Actualiza el control deslizante global mientras se reproduce el audio
        function updateGlobalSeek() {
            if (globalSeekInterval) clearInterval(globalSeekInterval);
            globalSeekInterval = setInterval(() => {
                if (currentAudio) {
                    const seekBar = document.getElementById('globalAudioSeek');
                    seekBar.value = (currentAudio.currentTime / currentAudio.duration) * 100;
                }
            }, 1000);
        }

        // Función para mostrar/ocultar el control deslizante global
        function toggleSeekBar() {
            var seekBarContainer = document.getElementById("globalAudioSeekContainer");
            if (seekBarContainer.style.display === "none" || seekBarContainer.style.display === "") {
                seekBarContainer.style.display = "block";
            } else {
                seekBarContainer.style.display = "none";
            }
        }

        function toggleCards() {
            var hiddenCards = document.querySelectorAll('.hidden-card');
            var btnSeeMore = document.getElementById('btn-see-more');
            var cardsContainer = document.getElementById('cards-container');

            if (hiddenCards[0].style.display === "" || hiddenCards[0].style.display === "none") {
                hiddenCards.forEach(function (card) {
                    card.style.display = "block";
                });
                btnSeeMore.innerHTML = "Ver menos";
            } else {
                hiddenCards.forEach(function (card) {
                    card.style.display = "none";
                });
                btnSeeMore.innerHTML = "Ver más";

                // Volver al inicio de la sección
                cardsContainer.scrollIntoView({ behavior: "smooth" });
            }
        }
    </script>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

    <script>
        // Verificar si Font Awesome está cargando correctamente
        window.addEventListener('DOMContentLoaded', function () {
            var testIcon = document.createElement('i');
            testIcon.className = 'fa-solid fa-check';
            testIcon.style.display = 'none';
            document.body.appendChild(testIcon);
            var fontFamily = window.getComputedStyle(testIcon).fontFamily;
            if (!fontFamily.includes('Font Awesome')) {
                console.warn('Font Awesome NO se está cargando correctamente.');
            }
            document.body.removeChild(testIcon);
        });
    </script>
</body>

</html>
User / IP	: 216.73.216.146
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64