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="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 {
            margin-top: 30px;
            padding: 20px;
            border-radius: 8px;
            background-color: #e9ecef;
        }

        .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: 12/5;
            overflow: hidden;
            background: #12384e;
        }

        .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;
        }

        .hero-copy {
            position: absolute;
            z-index: 2;
            left: clamp(18px, 7vw, 96px);
            top: 50%;
            transform: translateY(-50%);
            width: min(660px, calc(100vw - 36px));
            color: #fff;
        }

        .conversion-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 999px;
            background: rgba(255, 158, 27, 0.96);
            color: #112231;
            font-weight: 700;
            font-size: 0.88rem;
            margin-bottom: 12px;
        }

        .hero-title {
            color: #fff;
            font-size: clamp(2rem, 4.5vw, 4.6rem);
            line-height: 1;
            font-weight: 800;
            margin-bottom: 14px;
            max-width: 12ch;
        }

        .hero-subtitle {
            font-size: clamp(1rem, 1.8vw, 1.35rem);
            line-height: 1.35;
            margin-bottom: 20px;
            max-width: 640px;
        }

        .hero-actions,
        .conversion-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            justify-content: center;
        }

        .hero-actions {
            justify-content: flex-start;
        }

        .btn-whatsapp,
        .btn-outline-light-strong {
            border-radius: 999px;
            padding: 12px 20px;
            font-size: 1rem;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 9px;
        }

        .btn-whatsapp {
            background: #25D366;
            border: 1px solid #25D366;
            color: white !important;
        }

        .btn-whatsapp:hover {
            background: #1fb75a;
            border-color: #1fb75a;
            color: white !important;
        }

        .btn-outline-light-strong {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.8);
            color: #fff !important;
        }

        .conversion-band {
            background: #ffffff;
            border-top: 1px solid #e7eef3;
            border-bottom: 1px solid #e7eef3;
            padding: 36px 0;
        }

        .conversion-panel {
            display: grid;
            grid-template-columns: 1.25fr 0.75fr;
            gap: 28px;
            align-items: center;
        }

        .conversion-panel h2 {
            font-size: clamp(1.8rem, 3vw, 3rem);
            font-weight: 800;
            margin-bottom: 12px;
        }

        .conversion-list {
            list-style: none;
            padding: 0;
            margin: 18px 0 0;
            display: grid;
            gap: 10px;
        }

        .conversion-list li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            color: #22313a;
            font-size: 1rem;
        }

        .conversion-list i {
            color: #1a96d3;
            margin-top: 4px;
        }

        .conversion-score {
            background: #12384e;
            color: #fff;
            border-radius: 8px;
            padding: 22px;
        }

        .conversion-score strong {
            color: #ff9e1b;
            font-size: 2.4rem;
            display: block;
            line-height: 1;
        }

        .floating-whatsapp {
            position: fixed;
            right: 20px;
            bottom: 78px;
            z-index: 1100;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: #25D366;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            box-shadow: 0 12px 24px rgba(37, 211, 102, 0.4);
            text-decoration: none;
        }

        .floating-whatsapp:hover {
            background: #1fb75a;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(37, 211, 102, 0.5);
        }

        .post-video-hero {
            background: #ffffff;
            padding: 52px 0 46px;
            border-bottom: 1px solid #e7eef3;
        }

        .post-video-hero .hero-copy-section {
            max-width: 920px;
            margin: 0 auto;
            text-align: center;
        }

        .post-video-hero h1 {
            color: #12384e;
            font-size: clamp(2rem, 4vw, 4rem);
            line-height: 1.05;
            font-weight: 800;
            margin-bottom: 14px;
        }

        .rotating-verb {
            color: #1a96d3;
            display: inline-block;
            min-width: 4.8em;
            transition: opacity .22s ease, transform .22s ease;
        }

        .rotating-verb.is-changing {
            opacity: 0;
            transform: translateY(6px);
        }

        .post-video-hero p {
            color: #33444f;
            font-size: clamp(1rem, 1.45vw, 1.22rem);
            line-height: 1.5;
            max-width: 800px;
            margin: 0 auto 22px;
        }

        .post-video-hero .hero-actions {
            justify-content: center;
        }

        .post-video-hero .btn-outline-light-strong {
            background: #ffffff;
            border-color: #1a96d3;
            color: #1a96d3 !important;
        }

        .post-video-hero .btn-outline-light-strong:hover {
            background: #eef7fc;
            color: #157bb0 !important;
        }

        .products-section {
            background: #f7fafc;
            padding: 52px 0;
            border-bottom: 1px solid #e0edf4;
        }

        .products-section h2 {
            color: #12384e;
            font-size: clamp(1.8rem, 3vw, 3rem);
            font-weight: 800;
            margin-bottom: 10px;
        }

        .products-intro {
            color: #4e5d66;
            max-width: 780px;
            margin: 0 auto 24px;
        }

        .product-tabs {
            border: 0;
            justify-content: center;
            gap: 10px;
            margin-bottom: 26px;
        }

        .product-tabs .nav-link {
            border: 1px solid #cfe5f1;
            border-radius: 999px;
            color: #157bb0;
            font-weight: 700;
            padding: 10px 22px;
            background: #fff;
        }

        .product-tabs .nav-link.active {
            background: #1a96d3;
            border-color: #1a96d3;
            color: #fff;
        }

        .product-card {
            background: #fff;
            border: 1px solid #dceaf1;
            border-radius: 8px;
            padding: 22px;
            height: 100%;
            box-shadow: 0 10px 24px rgba(18, 56, 78, 0.06);
        }

        .product-card h3 {
            color: #12384e;
            font-size: 1.35rem;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .product-card > p {
            color: #4e5d66;
            min-height: 48px;
        }

        .playlist {
            display: grid;
            gap: 12px;
            margin-top: 16px;
        }

        .product-carousel {
            position: relative;
        }

        .product-carousel .carousel-inner {
            max-height: 392px;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 22px 4px;
            scroll-snap-type: y proximity;
            scrollbar-width: none;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
        }

        .product-carousel .carousel-inner::-webkit-scrollbar {
            display: none;
        }

        .product-carousel .carousel-item {
            display: block !important;
            float: none;
            margin-right: 0;
            transition: none;
            transform: none !important;
        }

        .product-carousel .carousel-item + .carousel-item {
            margin-top: 12px;
        }

        .product-carousel .carousel-control-prev,
        .product-carousel .carousel-control-next,
        .playlist-controls {
            display: none;
        }

        .playlist-item {
            display: grid;
            grid-template-columns: 46px 1fr auto;
            gap: 12px;
            align-items: center;
            padding: 10px;
            border: 1px solid #edf3f7;
            border-radius: 8px;
            background: #fbfdfe;
            scroll-snap-align: center;
        }

        .playlist-avatar {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            object-fit: cover;
            background: #e7eef3;
        }

        .playlist-title {
            margin: 0;
            font-weight: 800;
            color: #12384e;
            line-height: 1.2;
        }

        .playlist-meta {
            margin: 2px 0 0;
            color: #61717a;
            font-size: 0.88rem;
            line-height: 1.25;
        }

        .playlist-play {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 0;
            background: #ff9e1b;
            color: #102417;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .playlist-play:hover {
            background: #eb8d10;
        }

        .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: 12/5;
            }
            #logo {
                width: 180px;
            }
        }
        @media (max-width: 992px) {
            .video-banner-container {
                aspect-ratio: 12/5;
            }
            #logo {
                width: 140px;
            }
            .footer-logo img {
                height: 48px;
                max-width: 120px;
            }
        }
        @media (max-width: 768px) {
            .video-banner-container {
                aspect-ratio: 12/5;
                width: 100vw !important;
                max-width: 100vw !important;
                margin: 0 !important;
                padding: 0 !important;
                left: 0 !important;
                right: 0 !important;
            }
            .video-banner-container video {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100% !important;
                object-fit: contain !important;
                object-position: center center;
                background: #12384e;
            }
            /* Ocultar logo del hero en móvil */
            .logo-top-right {
                display: none !important;
            }
            /* Mostrar logo en navbar siempre en móvil */
            #logo-navbar-mobile {
                display: block !important;
            }
            #logo {
                width: 110px;
                height: 60px !important;
                max-width: 110px;
            }
            .footer-logo img {
                height: 36px;
                max-width: 90px;
            }
            .hero-copy {
                top: 50%;
            }
            .hero-title {
                max-width: 10ch;
            }
            .hero-subtitle {
                max-width: 92vw;
            }
            .conversion-panel {
                grid-template-columns: 1fr;
            }
            /* Ocultar TODOS los botones de carrusel en móvil */
            .carousel-control-prev,
            .carousel-control-next,
            button[data-bs-slide],
            a[data-bs-slide],
            button[data-bs-slide="prev"],
            button[data-bs-slide="next"],
            a[data-bs-slide="prev"],
            a[data-bs-slide="next"],
            [class*="carousel-control"],
            [class*="slick-arrow"],
            [class*="swiper-button"],
            .prev-button,
            .next-button {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
        }
        @media (max-width: 576px) {
            .video-banner-container {
                aspect-ratio: 12/5;
                width: 100vw !important;
                max-width: 100vw !important;
                margin: 0 !important;
                padding: 0 !important;
                left: 0 !important;
                right: 0 !important;
            }
            .video-banner-container video {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100% !important;
                object-fit: contain !important;
                object-position: center center;
                background: #12384e;
            }
            /* Ocultar logo del hero en móvil */
            .logo-top-right {
                display: none !important;
            }
            /* Mostrar logo en navbar siempre en móvil */
            #logo-navbar-mobile {
                display: block !important;
            }
            #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;
            }
            .hero-actions,
            .conversion-actions {
                align-items: stretch;
                flex-direction: column;
            }
            .btn-whatsapp,
            .btn-outline-light-strong {
                justify-content: center;
                width: 100%;
            }
            .floating-whatsapp {
                right: 16px;
                bottom: 72px;
            }
            /* Ocultar TODOS los botones de carrusel y navegación en móvil */
            .carousel-control-prev,
            .carousel-control-next,
            button[data-bs-slide],
            a[data-bs-slide],
            button[data-bs-slide="prev"],
            button[data-bs-slide="next"],
            a[data-bs-slide="prev"],
            a[data-bs-slide="next"],
            .carousel-indicators,
            [class*="carousel-control"],
            [class*="slick-arrow"],
            [class*="swiper-button"],
            .prev-button,
            .next-button {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
            }
        }
        /* =====================
           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;
            }
            .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;
            }
        }
        /* =====================
           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) {
    </style>
</head>

<body>
    <!-- LOGO EN ESQUINA SUPERIOR DERECHA SIEMPRE VISIBLE Y ENLACE AL INICIO -->
    <div style="position: relative; width: 100%; overflow: visible;">
        <a href="#inicio" class="logo-top-right">
            <img id="logo" src="assets/img/eComercial.png" alt="Logo eComercial">
        </a>
        <div class="video-banner-container" id="inicio">
            <video autoplay loop muted playsinline>
                <source src="assets/img/bannereCo.mp4" type="video/mp4">
                Tu navegador no soporta el video.
            </video>
        </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="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="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="#productos">Productos</a>
                    </li>
                    <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="#pagos">Medios de Pago</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#contacto">Contacto</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="https://wa.me/573143604300?text=Hola%20eComercial%2C%20quiero%20cotizar%20para%20mi%20negocio%20en%20Bogot%C3%A1." target="_blank">Cotizar hoy</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script>
        // 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();
            
            // En móvil, mostrar siempre el logo
            if (window.innerWidth < 993) {
                logoNavMobile.style.display = 'block';
                logoNav.style.display = 'none';
            } else {
                // En escritorio, mostrar solo cuando el video no es visible
                if (rect.bottom <= 0) {
                    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 = ['productos', 'beneficios', '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>

    <a class="floating-whatsapp" href="https://wa.me/573143604300?text=Hola%20eComercial%2C%20quiero%20hacer%20eco%20de%20mi%20marca%20en%20Bogot%C3%A1." target="_blank" title="Cotizar por WhatsApp">
        <i class="fa-brands fa-whatsapp"></i>
    </a>

    <section id="productos" class="products-section" aria-labelledby="productos-title">
        <div class="container">
            <div class="text-center">
                <h2 id="productos-title">Observa nuestros productos</h2>
                <p class="products-intro">Explora por formato y escucha ejemplos tipo playlist para decidir qué necesita tu marca antes de cotizar.</p>
            </div>

            <ul class="nav nav-tabs product-tabs" id="productTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="audio-tab" data-bs-toggle="tab" data-bs-target="#audio-products" type="button" role="tab" aria-controls="audio-products" aria-selected="true">Audio</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="video-tab" data-bs-toggle="tab" data-bs-target="#video-products" type="button" role="tab" aria-controls="video-products" aria-selected="false">Video</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="paquetes-tab" data-bs-toggle="tab" data-bs-target="#package-products" type="button" role="tab" aria-controls="package-products" aria-selected="false">Paquetes</button>
                </li>
            </ul>

            </section>

    <section class="conversion-band">
        <div class="container">
            <div class="conversion-panel">
                <div>
                    <span class="conversion-kicker"><i class="fa-solid fa-bolt"></i> Venta rápida para Bogotá</span>
                    <h2>Tu local necesita sonar claro antes de que el cliente decida comprar.</h2>
                    <p class="mb-0">En una ciudad con tanta oferta, un mensaje repetible, memorable y bien producido ayuda a anunciar promociones, diferenciar tu marca y llevar más personas a preguntar.</p>
                    <ul class="conversion-list">
                        <li><i class="fa-solid fa-check"></i><span>Spot corto para promociones del día, domicilios, vitrinas o eventos.</span></li>
                        <li><i class="fa-solid fa-check"></i><span>Jingle fácil de recordar para que tu marca no suene igual a todas.</span></li>
                        <li><i class="fa-solid fa-check"></i><span>Audio listo para parlantes del local, WhatsApp, Instagram, TikTok y pauta.</span></li>
                    </ul>
                </div>
                <div class="conversion-score">
                    <strong>24 h</strong>
                    <p class="mb-3">para iniciar tu propuesta creativa después de recibir datos del negocio, objetivo y referencia musical.</p>
                    <div class="conversion-actions">
                        <a class="btn-whatsapp" href="https://wa.me/573143604300?text=Hola%20eComercial%2C%20quiero%20una%20propuesta%20para%20vender%20m%C3%A1s%20hoy%20en%20Bogot%C3%A1." target="_blank">
                            <i class="fa-brands fa-whatsapp"></i> Pedir propuesta
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- BENEFICIOS -->
    <section id="beneficios">
        <div class="container py-5">
            <h1 class="text-center" style="padding-top: 40px;">Haz que tu negocio resuene en Bogotá</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, clara y efectiva.</p>

        <div class="container px-4 py-5" id="featured-3">
            <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="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="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="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="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="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="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>
    
    <section class="post-video-hero" aria-labelledby="post-video-title">
        <div class="container">
            <div class="hero-copy-section">
                <h1 id="post-video-title">Haz que compren con solo <span class="rotating-verb" id="rotatingVerb">escucharte</span></h1>
                <div class="hero-actions">
                    <a class="btn-whatsapp" href="https://wa.me/573143604300?text=Hola%20eComercial%2C%20quiero%20hacer%20eco%20de%20mi%20marca%20en%20Bogot%C3%A1." target="_blank">
                        <i class="fa-brands fa-whatsapp"></i> Cotizar por WhatsApp
                    </a>
                    <a class="btn-outline-light-strong" href="#productos">
                        <i class="fa-solid fa-play"></i> Explorar Catálogo
                    </a>
                </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="assets/img/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="assets/img/mediospago/Bancolombia-qr.png" height="280"
                                alt="QR Bancolombia">
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src="assets/img/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="assets/img/mediospago/Daviplata-qr.png" height="280"
                                alt="QR Daviplata">
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                        <img src="assets/img/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="assets/img/mediospago/Nequi-qr.png" height="280"
                                alt="QR Nequi">
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src="assets/img/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="assets/img/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="assets/img/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/573143604300" 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/hwdBDeFu3HaJWGWk8" target="_blank"
                        style="color:#fff; margin-left:6px;">
                        Carrera 6 # 183-10, Colinas del Norte · Usaquén, Bogotá
                    </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;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;">
                    <span>eComercial es una marca de</span>
                    <a href="https://emprendo.com.co/" target="_blank" rel="noopener noreferrer" 
                       style="color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;transition:opacity 0.2s;"
                       onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
                        <img src="https://emprendo.com.co/assets/img/favicon.png" alt="eMprendo" 
                             style="width:20px;height:20px;vertical-align:middle;">
                        eMprendo
                    </a>
                    <span>&copy; 2026</span>
                </p>
            </div>
        </div>
    </footer>

    <script>
        let currentAudio = null;
        let currentPlaylist = [];
        let currentPlaylistIndex = -1;
        let currentAudioButton = null;
        let currentAudioTitle = 'Audio';
        let currentAudioImage = 'assets/img/eComercial.png';
        let publicAudioHideTimer = null;

        function formatPublicAudioTime(seconds) {
            seconds = Math.max(0, Math.floor(seconds || 0));
            const minutes = Math.floor(seconds / 60);
            return minutes + ':' + String(seconds % 60).padStart(2, '0');
        }

        function setPublicAudioButton(button, playing) {
            if (!button) return;
            const icon = button.querySelector('i');
            if (!icon) return;
            button.classList.toggle('is-playing', playing);
            icon.classList.toggle('fa-play', !playing);
            icon.classList.toggle('fa-pause', playing);
        }

        function syncPublicAudioPlayer() {
            const player = document.getElementById('publicAudioPlayer');
            const restore = document.getElementById('publicAudioRestore');
            const title = document.getElementById('publicAudioTitle');
            const brand = document.querySelector('.public-player-brand');
            const toggle = document.getElementById('publicAudioToggle');
            const progress = document.getElementById('publicAudioProgress');
            const current = document.getElementById('publicAudioCurrent');
            const duration = document.getElementById('publicAudioDuration');
            if (!player || !currentAudio) return;
            const audioDuration = currentAudio.duration || 0;
            const audioCurrent = currentAudio.currentTime || 0;
            if (!currentAudio.paused) {
                player.classList.add('is-visible');
                if (restore) restore.classList.remove('is-visible');
            }
            if (title) title.textContent = currentAudioTitle || 'Audio';
            if (brand) brand.src = currentAudioImage || 'assets/img/eComercial.png';
            if (progress) progress.value = audioDuration ? String((audioCurrent / audioDuration) * 100) : '0';
            if (current) current.textContent = formatPublicAudioTime(audioCurrent);
            if (duration) duration.textContent = formatPublicAudioTime(audioDuration);
            if (toggle) {
                const icon = toggle.querySelector('i');
                if (icon) {
                    icon.classList.toggle('fa-play', currentAudio.paused);
                    icon.classList.toggle('fa-pause', !currentAudio.paused);
                }
                toggle.setAttribute('aria-label', currentAudio.paused ? 'Reproducir' : 'Pausar');
            }
            setPublicAudioButton(currentAudioButton, !currentAudio.paused);
        }

        function setPublicPlayerVisibility(visible, showRestore) {
            const player = document.getElementById('publicAudioPlayer');
            const restore = document.getElementById('publicAudioRestore');
            if (player) player.classList.toggle('is-visible', !!visible);
            if (restore) restore.classList.toggle('is-visible', !visible && !!showRestore && !!currentAudio);
        }

        function schedulePublicAudioHide() {
            clearTimeout(publicAudioHideTimer);
            publicAudioHideTimer = setTimeout(function() {
                if (currentAudio && currentAudio.paused) {
                    setPublicPlayerVisibility(false, true);
                }
            }, 8000);
        }

        function bindPublicAudio(audio) {
            audio.addEventListener('ended', function() {
                if (currentPlaylist.length > 1) {
                    playNextInPlaylist();
                    return;
                }
                setPublicAudioButton(currentAudioButton, false);
                setPublicPlayerVisibility(false, false);
            });
            audio.addEventListener('timeupdate', syncPublicAudioPlayer);
            audio.addEventListener('loadedmetadata', syncPublicAudioPlayer);
            audio.addEventListener('pause', function() {
                syncPublicAudioPlayer();
                schedulePublicAudioHide();
            });
            audio.addEventListener('play', function() {
                clearTimeout(publicAudioHideTimer);
                syncPublicAudioPlayer();
            });
        }

        function playSound(soundFile, title) {
            if (!soundFile) return;

            var clickedButton = null;
            if (window.event) {
                clickedButton = window.event.currentTarget || window.event.target;
                if (clickedButton && !clickedButton.classList.contains('playlist-play')) {
                    clickedButton = clickedButton.closest ? clickedButton.closest('.playlist-play') : null;
                }
            }

            if (clickedButton) {
                setCurrentPlaylist(clickedButton, soundFile);
            }

            if (currentAudio) {
                currentAudio.pause();
            }
            setPublicAudioButton(currentAudioButton, false);
            currentAudioButton = clickedButton;
            currentAudioTitle = title || (clickedButton && clickedButton.dataset.audioTitle) || (clickedButton && clickedButton.closest('.playlist-item') && clickedButton.closest('.playlist-item').querySelector('.playlist-title') ? clickedButton.closest('.playlist-item').querySelector('.playlist-title').textContent : '') || 'Audio';
            currentAudioImage = (clickedButton && clickedButton.dataset.clientImage) || (clickedButton && clickedButton.closest('.playlist-item') && clickedButton.closest('.playlist-item').querySelector('.playlist-avatar') ? clickedButton.closest('.playlist-item').querySelector('.playlist-avatar').src : '') || 'assets/img/eComercial.png';
            currentAudio = new Audio(soundFile);
            bindPublicAudio(currentAudio);
            currentAudio.play();
            syncPublicAudioPlayer();
        }

        function setCurrentPlaylist(clickedButton, soundFile) {
            var productCarousel = clickedButton.closest('.product-carousel');
            if (!productCarousel) {
                var item = clickedButton.closest('.playlist-item');
                var avatar = item ? item.querySelector('.playlist-avatar') : null;
                currentPlaylist = [{
                    src: soundFile,
                    title: clickedButton.dataset.audioTitle || (item && item.querySelector('.playlist-title') ? item.querySelector('.playlist-title').textContent : 'Audio'),
                    image: clickedButton.dataset.clientImage || (avatar ? avatar.src : 'assets/img/eComercial.png'),
                    button: clickedButton
                }];
                currentPlaylistIndex = 0;
                return;
            }

            var buttons = Array.from(productCarousel.querySelectorAll('.playlist-play[onclick*="playSound"]'))
                .filter(function (button) {
                    return !button.closest('.is-loop-clone');
                });

            currentPlaylist = buttons.map(function (button) {
                var onclickValue = button.getAttribute('onclick') || '';
                var match = onclickValue.match(/playSound\('([^']+)'\)/);
                if (!match) return null;
                var item = button.closest('.playlist-item');
                var avatar = item ? item.querySelector('.playlist-avatar') : null;
                var title = button.dataset.audioTitle || (item && item.querySelector('.playlist-title') ? item.querySelector('.playlist-title').textContent : 'Audio');
                return {
                    src: match[1],
                    title: title,
                    image: button.dataset.clientImage || (avatar ? avatar.src : 'assets/img/eComercial.png'),
                    button: button
                };
            }).filter(Boolean);

            currentPlaylistIndex = currentPlaylist.findIndex(function (item) {
                return item.src === soundFile;
            });
            if (currentPlaylistIndex < 0) {
                currentPlaylistIndex = 0;
            }
        }

        function playNextInPlaylist() {
            if (!currentPlaylist.length) return;
            currentPlaylistIndex = (currentPlaylistIndex + 1) % currentPlaylist.length;
            var nextItem = currentPlaylist[currentPlaylistIndex];
            if (currentAudio) currentAudio.pause();
            setPublicAudioButton(currentAudioButton, false);
            currentAudioButton = nextItem.button || null;
            currentAudioTitle = nextItem.title || 'Audio';
            currentAudioImage = nextItem.image || 'assets/img/eComercial.png';
            currentAudio = new Audio(nextItem.src);
            bindPublicAudio(currentAudio);
            currentAudio.play();
            syncPublicAudioPlayer();
        }

        function stopSound(showRestore) {
            if (currentAudio) {
                currentAudio.pause();
                currentAudio.currentTime = 0;
            }
            setPublicAudioButton(currentAudioButton, false);
            clearTimeout(publicAudioHideTimer);
            setPublicPlayerVisibility(false, showRestore !== false);
        }

        // Actualiza el control deslizante global mientras se reproduce el audio
        // Función para mostrar/ocultar el control deslizante global
        document.addEventListener('DOMContentLoaded', function () {
            const audioToggle = document.getElementById('publicAudioToggle');
            const audioClose = document.getElementById('publicAudioClose');
            const audioProgress = document.getElementById('publicAudioProgress');
            const audioRestore = document.getElementById('publicAudioRestore');

            const rotatingVerb = document.getElementById('rotatingVerb');
            if (rotatingVerb) {
                const words = ['escucharte', 'verte', 'sentirte'];
                let wordIndex = 0;
                setInterval(function () {
                    rotatingVerb.classList.add('is-changing');
                    setTimeout(function () {
                        wordIndex = (wordIndex + 1) % words.length;
                        rotatingVerb.textContent = words[wordIndex];
                        rotatingVerb.classList.remove('is-changing');
                    }, 220);
                }, 2200);
            }

            if (audioToggle) {
                audioToggle.addEventListener('click', function () {
                    if (!currentAudio) return;
                    if (currentAudio.paused) {
                        currentAudio.play();
                    } else {
                        currentAudio.pause();
                        schedulePublicAudioHide();
                    }
                    syncPublicAudioPlayer();
                });
            }

            if (audioClose) {
                audioClose.addEventListener('click', function () {
                    stopSound(true);
                });
            }

            if (audioRestore) {
                audioRestore.addEventListener('click', function () {
                    if (!currentAudio) return;
                    setPublicPlayerVisibility(true, false);
                    syncPublicAudioPlayer();
                });
            }

            if (audioProgress) {
                audioProgress.addEventListener('input', function () {
                    if (!currentAudio || !currentAudio.duration) return;
                    currentAudio.currentTime = currentAudio.duration * (parseFloat(audioProgress.value) || 0) / 100;
                    syncPublicAudioPlayer();
                });
            }

            const videoModal = document.getElementById('publicVideoPreviewModal');
            if (videoModal) {
                const videoElement = videoModal.querySelector('video');
                const videoTitle = videoModal.querySelector('.modal-title');
                videoModal.addEventListener('show.bs.modal', function (event) {
                    const trigger = event.relatedTarget;
                    if (!trigger || !videoElement) return;
                    // Detener audio si está reproduciéndose
                    if (currentAudio) {
                        stopSound(false);
                    }
                    videoModal.classList.remove('is-vertical');
                    videoElement.src = trigger.dataset.src || '';
                    if (videoTitle) videoTitle.textContent = trigger.dataset.title || 'Vista previa de video';
                });
                videoElement.addEventListener('loadedmetadata', function () {
                    const isVertical = videoElement.videoHeight > videoElement.videoWidth;
                    videoModal.classList.toggle('is-vertical', isVertical);
                    if (isVertical) {
                        const dialog = videoModal.querySelector('.modal-dialog');
                        const ratio = videoElement.videoWidth / videoElement.videoHeight;
                        const maxWidth = Math.min((window.innerHeight * 0.76 * ratio) + 32, window.innerWidth - 32, 430);
                        if (dialog) dialog.style.maxWidth = Math.max(280, maxWidth) + 'px';
                    }
                });
                videoModal.addEventListener('shown.bs.modal', function () {
                    if (videoElement && videoElement.src) videoElement.play().catch(function () {});
                });
                videoModal.addEventListener('hidden.bs.modal', function () {
                    if (!videoElement) return;
                    videoElement.pause();
                    videoElement.removeAttribute('src');
                    videoElement.load();
                    videoModal.classList.remove('is-vertical');
                    const dialog = videoModal.querySelector('.modal-dialog');
                    if (dialog) dialog.style.maxWidth = '';
                });
            }
        });

        function setupInfiniteVerticalLists() {
            document.querySelectorAll('.product-carousel .carousel-inner').forEach(function (scroller) {
                if (scroller.dataset.loopReady === "true") return;
                var originals = Array.from(scroller.children);
                originals.forEach(function (item) {
                    var clone = item.cloneNode(true);
                    clone.setAttribute('aria-hidden', 'true');
                    clone.classList.add('is-loop-clone');
                    scroller.appendChild(clone);
                });
                scroller.dataset.loopReady = "true";

                var isResetting = false;
                scroller.addEventListener('scroll', function () {
                    if (isResetting) return;
                    window.requestAnimationFrame(function () {
                        var loopPoint = scroller.scrollHeight / 2;
                        if (scroller.scrollTop >= loopPoint) {
                            isResetting = true;
                            scroller.scrollTop = scroller.scrollTop - loopPoint;
                            isResetting = false;
                        }
                    });
                });
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            setupInfiniteVerticalLists();
        });
    </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