Tul xxx Tul

Viewing: index.php

<?php
require_once __DIR__ . '/../utils/helpers.php';
require_once __DIR__ . '/../utils/session.php';
require_once __DIR__ . '/../config/database.php';
require_once __DIR__ . '/../app/Models/Product.php';
$csrfToken = SessionManager::generateCsrfToken();
$baseUrl = routeUrl();

// Cargar productos públicos ordenados sin alterar la estética
$productModel = new Product($pdo);
$productosPublicos = $productModel->allPublicOrdered();
$audioProducts = array_values(array_filter($productosPublicos, function($p){ return ($p['categoria'] ?? '') === 'Audio'; }));
$visualProducts = array_values(array_filter($productosPublicos, function($p){ return ($p['categoria'] ?? '') === 'Visual'; }));

// Paletas de gradientes (reciclan la estética existente)
$gradientsAudio = [
    'radial-gradient(circle, #a6a6ff, #5b5bff)',
    'radial-gradient(circle, #7afff4, #44caff)',
    'radial-gradient(circle, #b2ff9f, #62ff77)',
    'radial-gradient(circle, #fff78d, #deff22)',
    'radial-gradient(circle, #ffd6b4, #ff9d2e)',
    'radial-gradient(circle, #eaa3ff, #cf32ff)',
    'radial-gradient(circle, #ff94bd, #ff279e)',
    'radial-gradient(circle, #ff8282, #f34343)'
];
$gradientsVisual = [
    'radial-gradient(circle, #8521ff, #bb93ff)',
    'radial-gradient(circle, #2155ff, #93acff)',
    'radial-gradient(circle, #21deff, #21f8ff)',
    'radial-gradient(circle, #21ff58, #7cff6b)',
    'radial-gradient(circle, #deff21, #f0ff6b)',
    'radial-gradient(circle, #ffd621, #ffdc6b)',
    'radial-gradient(circle, #ff3b21, #ff7c6b)',
    'radial-gradient(circle, #ff266e, #ff73a2)'
];
?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CyNe Producciones</title>
    <!-- Nunito Font -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
    <!-- Favicon -->
    <link rel="icon" href="<?= htmlspecialchars(assetUrl('public/assets/img/FaviconCyNe.png'), ENT_QUOTES, 'UTF-8') ?>">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- AOS CSS -->
    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* ================== General ================== */
        body {
            background-color: #000;
            color: #fff;
            font-family: 'Nunito', sans-serif;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }

        .login-modal .form-label {
            color: #000 !important;
        }

        * {
            font-family: 'Nunito', sans-serif;
        }

        a {
            color: #fff;
            text-decoration: none;
        }

        a:hover {
            color: #aaa;
        }

        /* Al navegar a una sección, deja espacio para que la navbar no tape el contenido */
        section {
            scroll-margin-top: 120px;
        }

        /* Secciones con video (Audio, Visual) tienen margen mayor */
        .video-section {
            scroll-margin-top: 550px;
        }

        /* ================== Navbar ================== */
        .navbar {
            transition: background-color 0.3s ease;
            background-color: transparent;
        }

        .navbar.scrolled {
            background-color: #000;
        }

        .fixed-top {
            z-index: 1000;
        }

        .navbar .nav-link {
            color: #fff !important;
        }

        .navbar .nav-link:hover {
            color: #aaa !important;
        }

        .btn-login {
            background: #00bfff;
            color: #fff;
            border-radius: 999px;
            padding: 8px 18px;
            font-weight: 600;
            transition: background 0.2s ease;
        }

        .btn-login:hover {
            background: #0099e5;
            color: #fff;
        }

        /* Logo: inicia grande y se reduce al hacer scroll */
        .navbar-brand img {
            transition: height 0.5s ease;
            height: 100px;
        }

        .navbar.scrolled .navbar-brand img {
            height: 50px;
        }

        /* ================== Video Header ================== */
        .video-header {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .video-header video {
            width: 100vw;
            height: 100vh;
            object-fit: cover;
            z-index: 0;
        }

        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.192);
            z-index: 1;
        }

        .video-header .content {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            text-align: center;
            flex-direction: column;
        }

        h1.display-3 {
            font-size: 4rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        p.lead {
            font-size: 1.5rem;
        }

        /* ================== Section Titles & Animations ================== */
        .section-title {
            font-size: 3rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            margin: 2rem 0;
            text-align: center;
            opacity: 0;
            animation: fadeIn 2s ease forwards;
        }

        .fade-in {
            animation: fadeIn 1.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-3px);
            }

            100% {
                transform: translateY(0);
            }
        }

        .constellation-text {
            position: absolute;
            opacity: 0.5;
            transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease;
            font-size: 2rem;
            white-space: nowrap;
            animation: float 4s ease-in-out infinite;
        }

        .constellation-text:hover {
            opacity: 1;
            transform: scale(1.2);
            color: #ffcc00;
        }

        /* ================== Nosotros ================== */
        #nosotros {
            background-color: #000;
            padding: 5rem 0;
            text-align: center;
            overflow: hidden;
        }

        @keyframes slideInOut {

            0%,
            100% {
                transform: translateX(0);
                opacity: 1;
            }

            50% {
                transform: translateX(20px);
                opacity: 0.8;
            }
        }

        @keyframes fadePulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        @keyframes bounceLoop {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes scaleRotate {

            0%,
            100% {
                transform: scale(1) rotate(0deg);
            }

            50% {
                transform: scale(1.1) rotate(2deg);
            }
        }

        .anim-1 {
            font-size: 4rem;
            font-weight: bold;
            margin-bottom: 1rem;
            animation: slideInOut 4s ease-in-out infinite;
        }

        .anim-2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            animation: fadePulse 4s ease-in-out infinite;
            animation-delay: 1s;
        }

        .anim-3 {
            font-size: 4rem;
            margin-bottom: 1rem;
            animation: bounceLoop 4s ease-in-out infinite;
            animation-delay: 2s;
        }

        .anim-4 {
            font-size: 2.5rem;
            animation: scaleRotate 4s ease-in-out infinite;
            animation-delay: 3s;
        }

        /* ================== Servicios (Imagen) ================== */
        #servicios img {
            width: 100%;
            display: block;
        }

        /* ================== Secciones Audio & Visual ================== */
        .video-section {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            color: white;
        }

        .video-bg {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translate(-50%, -50%);
            z-index: 0;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1;
        }

        .constellation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
        }

        /* ================== Tarifas - Cards ================== */
        .card-custom {
            aspect-ratio: 1 / 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            transition: transform 0.3s ease, opacity 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            padding: 1rem;
        }

        .card-custom:hover {
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.7;
            }

            100% {
                opacity: 1;
            }
        }

        .btn-capacitacion {
            margin-top: 1rem;
            background-color: #333;
            border: none;
            padding: 0.5rem 1rem;
            color: #fff;
            text-shadow: 1px 1px 2px #000;
            transition: background-color 0.3s ease;
        }

        .btn-capacitacion:hover {
            background-color: #555;
        }

        /* ================== Contacto ================== */
        #tarifas,
        #contacto {
            padding: 5rem 0;
        }

        .contact-info {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.2rem;
        }

        .contact-item a {
            color: #fff;
            transition: color 0.3s ease;
        }

        .contact-item a:hover {
            color: #ffcc00;
        }

        .contact-icon {
            font-size: 2rem;
        }

        .icon-whatsapp {
            color: #25D366;
        }

        .icon-email {
            color: #D44638;
        }

        .icon-address {
            color: #4285F4;
        }

        .icon-instagram {
            color: #C13584;
        }

        .icon-youtube {
            color: #FF0000;
        }

        /* ================== Footer ================== */
        footer {
            background-color: #000;
            padding: 1.5rem 0;
        }

        footer .container .row {
            align-items: center;
        }

        /* ================== Efecto Parallax en Sección Film ================== */
        .film-section {
            position: relative;
            width: 100%;
            height: 600px;
            display: flex;
            overflow: hidden;
            font-family: 'Nunito', sans-serif;
        }

        .film-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://emprendo.com.co/ImagenCyNeProducciones/your-parallax-bg.jpg') no-repeat center center;
            background-size: cover;
            background-attachment: fixed;
            opacity: 0.3;
            z-index: -3;
        }

        /* ================== Sección Film - Estilo Celuloide ================== */
        .film-split {
            width: 50%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 1rem;
        }

        .film-left {
            background-color: #000;
            color: #fff;
        }

        .film-right {
            background-color: #fff;
            color: #000;
        }

        .left-text,
        .right-text {
            z-index: 1;
        }

        .left-text {
            text-align: right;
        }

        .right-text {
            text-align: left;
        }

        .left-text h1,
        .right-text h1 {
            margin: 0.5rem 0;
        }

        .film-holes {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            z-index: 2;
        }

        .film-holes-left {
            left: 30px;
        }

        .film-holes-right {
            right: 30px;
        }

        .square {
            width: 40px;
            height: 40px;
        }

        .film-left .square {
            background-color: #fff;
        }

        .film-right .square {
            background-color: #000;
        }

        .center-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #000;
            color: #fff;
            padding: 0.5rem 1rem;
            z-index: 3;
            font-weight: bold;
            text-transform: uppercase;
            white-space: nowrap;
            border: 2px solid #fff;
        }

        .bottom-text {
            position: absolute;
            bottom: 1rem;
            width: 100%;
            text-align: center;
            z-index: 3;
        }

        .parallax {
            background-image: url('<?= htmlspecialchars(assetUrl('public/assets/img/CyNe.jpg'), ENT_QUOTES, 'UTF-8') ?>');
            min-height: 400px;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Ajustes para Navbar Responsive */
        @media (max-width: 991px) {
            .navbar-toggler {
                background-color: transparent;
                border: none;
                transition: transform 0.3s ease;
            }

            .navbar-toggler:hover {
                transform: scale(1.1);
            }

            .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(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
            }

            .navbar-collapse {
                background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.95));
                padding: 1rem;
                margin-top: 1rem;
                text-align: right;
            }

            .navbar.scrolled .navbar-collapse {
                background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.95));
            }

            .navbar-nav {
                text-align: right;
            }

            .navbar-nav .nav-item {
                padding: 0.5rem 0;
                transform: translateX(0);
                transition: transform 0.3s ease, color 0.3s ease;
            }

            .navbar-nav .nav-item:hover {
                transform: translateX(-10px);
            }

            .navbar-nav .nav-link {
                padding-right: 0;
                position: relative;
            }

            .navbar-nav .nav-link::after {
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                width: 0;
                height: 2px;
                background-color: #fff;
                transition: width 0.3s ease;
            }

            .navbar-nav .nav-link:hover::after {
                width: 100%;
                left: 0;
            }

            .navbar-brand img {
                height: 60px;
            }

            .navbar.scrolled .navbar-brand img {
                height: 40px;
            }
        }

        /* Ajustes responsive para el Video Header */
        @media (max-width: 768px) {
            .video-header {
                height: 40vh;
                /* Altura reducida para tablets */
                margin-top: 60px;
                /* Reducido de 120px */
                margin-bottom: 0;
                /* Aseguramos que no haya margen inferior */
            }

            .video-header video {
                height: 40vh;
                width: 100%;
                object-position: center;
            }

            /* Ajustamos el espacio para la siguiente sección */
            #nosotros {
                padding-top: 2rem;
                /* Reducido del padding original */
                margin-top: 0;
                /* Eliminamos cualquier margen superior */
            }

            /* Títulos */
            .section-title {
                font-size: 2rem;
            }

            /* Sección Nosotros */
            .anim-1 {
                font-size: 2.5rem;
            }

            .anim-2 {
                font-size: 1.8rem;
            }

            .anim-3 {
                font-size: 2.5rem;
            }

            .anim-4 {
                font-size: 1.8rem;
            }

            /* Sección Film */
            .film-section {
                flex-direction: column;
                height: auto;
                min-height: 600px;
                /* Reducido de 800px */
            }

            .film-split {
                width: 100%;
                height: 40%;
                /* Reducido de 50% */
            }

            .film-holes {
                display: none;
                /* Ocultar los cuadrados en móvil */
            }

            .center-box {
                width: 90%;
                text-align: center;
            }

            /* Constelación de textos */
            .constellation-text {
                font-size: 1.5rem;
            }

            .parallax {
                background-attachment: scroll;
                min-height: 200px;
                /* Reducido de 300px a 200px */
            }

            .contact-info {
                flex-direction: column;
                align-items: center;
            }

            .contact-item {
                width: 100%;
                justify-content: center;
            }

            footer .container .row>div {
                margin-bottom: 1rem;
                text-align: center;
            }

            footer .container .row>div:last-child {
                margin-bottom: 0;
            }
        }

        /* Ajustes para tablets */
        @media (min-width: 769px) and (max-width: 991px) {
            .constellation-text {
                font-size: 1.8rem;
            }
        }

        /* Ajustes para móviles pequeños */
        @media (max-width: 576px) {
            .video-header {
                height: 15vh;
                /* Ajustado de 20vh */
                margin-top: 100px;
                /* Reducido de 80px */
                margin-bottom: 0;
            }

            .video-header video {
                height: 15vh;
                width: 100%;
                object-position: center;
            }

            /* Ajustamos el espacio para la siguiente sección */
            #nosotros {
                padding-top: 0;
                /* Eliminamos el padding superior */
                margin-top: 0;
                padding: 1rem 0;
                /* Reducimos el padding general */
            }

            /* Tarifas Cards */
            .card-custom {
                margin-bottom: 1rem;
            }

            /* Contacto */
            .contact-info {
                gap: 1rem;
            }

            .contact-item {
                font-size: 1rem;
            }

            .contact-icon {
                font-size: 1.5rem;
            }

            /* Ajuste scroll-margin para navegación */
            section {
                scroll-margin-top: 80px;
            }

            .video-section {
                scroll-margin-top: 80px;
                height: 100vh;
            }

            /* Ajuste para textos de constelación */
            .constellation-text {
                font-size: 1.2rem;
                white-space: normal;
                text-align: center;
                width: auto;
                max-width: 150px;
            }

            .card-custom .card-title {
                font-size: 0.9rem;
            }

            .card-custom .card-text {
                font-size: 1.2rem;
            }

            .card-custom .fa-2x {
                font-size: 1.5em;
            }

            .parallax {
                min-height: 150px;
                /* Aún más reducido para móviles pequeños */
            }

            .bottom-text h1 {
                color: #000000 !important;
            }

            .bottom-text h1 span {
                color: #000000 !important;
            }

            /* Sección Film */
            .film-section {
                min-height: 400px;
                padding: 30px 0;
            }

            .film-split {
                height: auto;
                padding: 20px 0;
                text-align: center;
            }

            .left-text,
            .right-text {
                text-align: center;
            }

            .left-text h1,
            .right-text h1 {
                margin: 15px 0;
                font-size: 1.5rem;
            }

            .center-box {
                width: 80%;
                font-size: 0.9em;
                position: relative;
                margin: 20px auto;
                transform: none;
                left: auto;
                top: auto;
            }

            .bottom-text {
                position: relative;
                padding: 20px 0;
                margin-top: 20px;
            }

            .bottom-text h1 {
                font-size: 1.2rem;
                color: white !important;
            }

            .bottom-text h1 span {
                color: white !important;
            }
        }
    </style>
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#top">
                <img src="<?= htmlspecialchars(assetUrl('public/assets/img/LogoCyNeBlanco(Transparente).png'), ENT_QUOTES, 'UTF-8') ?>"
                    alt="Logo CyNe">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navmenu">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
                    <li class="nav-item">
                        <a class="nav-link" href="#nosotros">Nosotros</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#audio">Audio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#visual">Visual</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tarifas">Tarifas</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contacto">Contacto</a>
                    </li>
                    <li class="nav-item ms-lg-3">
                        <button class="btn btn-login" data-bs-toggle="modal" data-bs-target="#loginModal">Iniciar sesión</button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Elemento para regresar al inicio -->
    <div id="top"></div>

    <!-- Video Header -->
    <header class="video-header">
        <video autoplay loop muted playsinline>
            <source src="<?= htmlspecialchars(assetUrl('public/assets/video/Header.mp4'), ENT_QUOTES, 'UTF-8') ?>" type="video/mp4">
            Tu navegador no soporta videos HTML5.
        </video>
        <div class="video-overlay"></div>
        <div class="content" data-aos="fade-up">
            <!-- Banner content opcional -->
        </div>
    </header>

    <!-- Nosotros Section -->
    <section id="nosotros">
        <div class="container">
            <h2 class="section-title anim-1">Somos</h2>
            <h2 class="anim-2">herramientas inteligentes para</h2>
            <h2 class="anim-3">construir, procesar y promocionar</h2>
            <h3 class="anim-4">Productos que reflejan la identidad<br>y concepto de sus creadores</h3>
        </div>
    </section>

    <!-- Sección de Celuloide con Efecto Parallax y Animación al Scroll -->
    <section id="film-section" class="film-section">
        <!-- Lado izquierdo (fondo negro) -->
        <div class="film-split film-left">
            <!-- Cuadritos del lado izquierdo -->
            <div class="film-holes film-holes-left">
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>
            <!-- Texto de la mitad izquierda -->
            <div class="left-text text-white" data-aos="fade-up" data-aos-duration="1200">
                <h1 style="color: #222222;">Creación</h1>
                <h1>Registro</h1>
                <h1 style="color: #1b1b1b;">Tratamiento</h1>
                <h1>Distribución</h1>
            </div>
        </div>
        <!-- Lado derecho (fondo blanco) -->
        <div class="film-split film-right">
            <!-- Cuadritos del lado derecho -->
            <div class="film-holes film-holes-right">
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>
            <!-- Texto de la mitad derecha -->
            <div class="right-text text-dark" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200">
                <h1>Creación</h1>
                <h1 style="color: #e6e6e6;">Registro</h1>
                <h1>Tratamiento</h1>
                <h1 style="color: #e6e6e6;">Distribución</h1>
            </div>
        </div>
        <!-- Bloque central para “Audio Visual” -->
        <div class="center-box">
            <h1><span>Audio</span>&nbsp;<span>Visual</span></h1>
        </div>
        <!-- Texto en la parte inferior -->
        <div class="bottom-text">
            <h1 style="color:white;">Capacitación &amp; <span style="color:black;">Entrenamiento</span></h1>
        </div>
    </section>

    <!-- Audio Section -->
    <section id="audio" class="video-section">
        <video autoplay loop muted playsinline class="video-bg">
            <source src="<?= htmlspecialchars(assetUrl('public/assets/video/Audio.mp4'), ENT_QUOTES, 'UTF-8') ?>" type="video/mp4">
            Tu navegador no soporta videos HTML5.
        </video>
        <div class="overlay"></div>
        <div class="constellation">
            <span class="constellation-text" style="top:15%; left:20%; animation-delay: 0s;">Grabación
                Profesional</span>
            <span class="constellation-text" style="top:25%; left:70%; animation-delay: 0.5s;">Edición, Mezcla y
                Master</span>
            <span class="constellation-text" style="top:55%; left:40%; animation-delay: 1s;">Producción Musical</span>
            <span class="constellation-text" style="top:45%; left:80%; animation-delay: 1.5s;">Micros</span>
            <span class="constellation-text" style="top:65%; left:25%; animation-delay: 2s;">Audiolibros</span>
            <span class="constellation-text" style="top:85%; left:50%; animation-delay: 2.5s;">Artística y
                Publicidad</span>
            <span class="constellation-text" style="top:45%; left:10%; animation-delay: 3s;">Proyectos de Audio</span>
        </div>
    </section>

    <!-- Visual Section -->
    <section id="visual" class="video-section">
        <video autoplay loop muted playsinline class="video-bg">
            <source src="<?= htmlspecialchars(assetUrl('public/assets/video/Video.mp4'), ENT_QUOTES, 'UTF-8') ?>" type="video/mp4">
            Tu navegador no soporta videos HTML5.
        </video>
        <div class="overlay"></div>
        <div class="constellation">
            <span class="constellation-text" style="top:15%; left:25%; animation-delay: 0s;">Fotografía
                Profesional</span>
            <span class="constellation-text" style="top:35%; left:45%; animation-delay: 0.5s;">Grabación de Video</span>
            <span class="constellation-text" style="top:60%; left:15%; animation-delay: 1s;">Proyectos
                Audiovisuales</span>
            <span class="constellation-text" style="top:70%; left:60%; animation-delay: 1.5s;">Edición de Video</span>
            <span class="constellation-text" style="top:30%; left:10%; animation-delay: 2s;">Corrección de Color</span>
            <span class="constellation-text" style="top:45%; left:20%; animation-delay: 2.5s;">Animación 2D y 3D</span>
            <span class="constellation-text" style="top:50%; left:80%; animation-delay: 3s;">Diseño Gráfico</span>
            <span class="constellation-text" style="top:85%; left:30%; animation-delay: 3.5s;">Diseño y Maquetación
                Web</span>
        </div>
    </section>

    <!-- Tarifas Section en Cards -->
    <section id="tarifas" class="py-5 fade-in" data-aos="fade-up">
        <div class="container">
            <h2 class="section-title">Tarifas</h2>
            <p class="text-center" style="padding: 0 20%;">Valores por hora de trabajo, que pueden ser contratadas de
                forma individual o por proyecto (dependiendo de la duración del proyecto consideramos descuentos
                especiales).</p>

            <!-- Servicios de Audio -->
            <h3 class="text-center text-uppercase mt-5 mb-4">Servicios de Audio</h3>
            <div class="row">
            <?php foreach ($audioProducts as $i => $p): 
                $gradient = $gradientsAudio[$i % count($gradientsAudio)];
                $nombre = htmlspecialchars($p['producto'] ?? '', ENT_QUOTES, 'UTF-8');
                $precio = number_format((float)($p['precio'] ?? 0), 0, '.', ',');
            ?>
                <div class="col-6 col-md-3 mb-3">
                    <div class="card card-custom text-white" style="background: <?= $gradient ?>;">
                        <div class="card-body d-flex flex-column align-items-center justify-content-center">
                            <i class="fa-solid fa-music fa-2x mb-2" style="text-shadow: 1px 1px 2px #000;"></i>
                            <h4 class="card-title" style="text-shadow: 1px 1px 2px #000;"><?= $nombre ?></h4>
                            <h2 class="card-text" style="text-shadow: 1px 1px 2px #000;">$<?= $precio ?></h2>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
            </div>

            <!-- Servicios Visuales -->
            <h3 class="text-center text-uppercase mt-5 mb-4">Servicios Visuales</h3>
            <div class="row">
            <?php foreach ($visualProducts as $i => $p): 
                $gradient = $gradientsVisual[$i % count($gradientsVisual)];
                $nombre = htmlspecialchars($p['producto'] ?? '', ENT_QUOTES, 'UTF-8');
                $precio = number_format((float)($p['precio'] ?? 0), 0, '.', ',');
            ?>
                <div class="col-6 col-md-3 mb-3">
                    <div class="card card-custom text-white" style="background: <?= $gradient ?>;">
                        <div class="card-body d-flex flex-column align-items-center justify-content-center">
                            <i class="fa-solid fa-film fa-2x mb-2" style="text-shadow: 1px 1px 2px #000;"></i>
                            <h4 class="card-title" style="text-shadow: 1px 1px 2px #000;"><?= $nombre ?></h4>
                            <h2 class="card-text" style="text-shadow: 1px 1px 2px #000;">$<?= $precio ?></h2>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Imagen de CyNe con efecto Parallax -->
    <section class="parallax">
        <!-- Puedes agregar contenido superpuesto, si lo deseas -->
    </section>

    <!-- Contacto Section -->
    <section id="contacto" class="py-5 bg-dark fade-in" data-aos="fade-up">
        <div class="container">
            <h2 class="section-title">Contacto</h2>
            <p class="text-center">Ponte en contacto y da Vida a tus Proyectos:</p>
            <div class="contact-info text-center mb-4">
                <div class="contact-item">
                    <i class="fa-solid fa-envelope contact-icon icon-email"></i>
                    <a href="mailto:cyne@emprendo.com.co">cyne@emprendo.com.co</a>
                </div>
                <div class="contact-item">
                    <i class="fa-brands fa-youtube contact-icon icon-youtube"></i>
                    <a href="https://www.youtube.com/@cyneproducciones8692" target="_blank">YouTube</a>
                </div>
                <div class="contact-item">
                    <i class="fa-brands fa-instagram contact-icon icon-instagram"></i>
                    <a href="https://www.instagram.com/cyneproducciones/" target="_blank">@cyne_produccion</a>
                </div>
            </div>
            <div class="contact-info text-center mb-4">
                <div class="contact-item">
                    <i class="fa-brands fa-whatsapp contact-icon icon-whatsapp"></i>
                    <a href="https://wa.me/573028424064" target="_blank">+57 302 842 40 64</a>
                </div>
                <div class="contact-item">
                    <i class="fa-brands fa-whatsapp contact-icon icon-whatsapp"></i>
                    <a href="https://wa.me/573143604300" target="_blank">+57 314 360 43 00</a>
                </div>
            </div>
            <div class="contact-info text-center">
                <div class="contact-item">
                    <i class="fa-solid fa-location-dot contact-icon icon-address"></i>
                    <a href="https://maps.app.goo.gl/5UEQfFRH3YrRf4dC6" target="_blank">
                        Cl. 17 entre avenidas 5ta y 6ta. #5A-32, La Cabrera, Cúcuta
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="py-4" style="background-color:#000;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-4 text-center text-md-start">
                    <a href="#top" class="footer-logo">
                        <img src="<?= htmlspecialchars(assetUrl('public/assets/img/FaviconCyNe.png'), ENT_QUOTES, 'UTF-8') ?>" alt="Logo CyNe"
                            style="height:50px;">
                    </a>
                </div>
                <div class="col-md-4 text-center">
                    <h5 class="mb-1">Creemos en lo que creas...</h5>
                    <p class="mb-0">&copy; CyNe Producciones 2025</p>
                </div>
                <div class="col-md-4 text-center text-md-end">
                    <a href="https://www.instagram.com/cyneproducciones/" target="_blank" class="me-2 icon-instagram">
                        <i class="fa-brands fa-instagram"></i>
                    </a>
                    <a href="https://www.youtube.com/@cyneproducciones8692" target="_blank" class="me-2 text-white">
                        <i class="fa-brands fa-youtube" style="color:#FF0000;"></i>
                    </a>
                    <a href="https://wa.me/573028424064" target="_blank" class="icon-whatsapp">
                        <i class="fa-brands fa-whatsapp"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Login Modal -->
    <div class="modal fade login-modal" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row g-4 align-items-center">
                            <div class="col-md-6 d-none d-md-flex justify-content-center">
                                <img src="<?= htmlspecialchars(assetUrl('public/assets/img/CyNe.gif'), ENT_QUOTES, 'UTF-8') ?>" alt="CyNe" style="max-width: 260px;">
                            </div>
                            <div class="col-md-6">
                                <form action="<?= htmlspecialchars(routeUrl('router.php?action=login'), ENT_QUOTES, 'UTF-8') ?>" method="post" id="loginForm">
                                    <input type="hidden" name="_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES, 'UTF-8') ?>">
                                    <input type="hidden" name="from_public" value="1">
                                    <div class="mb-3">
                                        <label for="loginEmail" class="form-label">Correo electrónico</label>
                                        <input type="email" class="form-control" id="loginEmail" name="email" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="loginPassword" class="form-label">Contraseña</label>
                                        <input type="password" class="form-control" id="loginPassword" name="password" required>
                                    </div>
                                    <button type="submit" class="btn btn-primary w-100">Entrar</button>
                                    <div id="loginError" class="alert alert-danger mt-3 d-none"></div>
                                    <div class="text-center mt-3">
                                        <a href="<?= htmlspecialchars(routeUrl('register.php'), ENT_QUOTES, 'UTF-8') ?>" class="text-decoration-underline" style="color:#00bfff;">¿No tienes cuenta? Regístrate</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
    <script>
        AOS.init({ duration: 1200 });

        // Función para manejar la transparencia del navbar
        function handleNavbarScroll() {
            const navbar = document.querySelector('.navbar');
            const navbarCollapse = document.querySelector('.navbar-collapse');

            if (window.scrollY > 50 || navbarCollapse.classList.contains('show')) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        }

        // Event listeners
        window.addEventListener('scroll', handleNavbarScroll);

        // Scroll suave al top
        document.querySelector('.navbar-brand').addEventListener('click', (e) => {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Cerrar menú al hacer click en un enlace
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', (e) => {
                const navbarCollapse = document.querySelector('.navbar-collapse');

                // Si es el enlace de Nosotros y estamos en móvil (max-width: 991px)
                if (link.getAttribute('href') === '#nosotros' && window.innerWidth <= 991) {
                    e.preventDefault();
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                }

                // Cerrar el menú hamburguesa
                if (navbarCollapse.classList.contains('show')) {
                    document.querySelector('.navbar-toggler').click();
                }
            });
        });

        // Manejar el toggle del menú
        document.querySelector('.navbar-toggler').addEventListener('click', () => {
            handleNavbarScroll();
        });

        // Scroll suave al top desde el logo del footer
        document.querySelector('.footer-logo').addEventListener('click', (e) => {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Mostrar modal de login si hubo error
        const params = new URLSearchParams(window.location.search);
        const loginErrorParam = params.get('login_error');
        if (loginErrorParam) {
            const loginModalEl = document.getElementById('loginModal');
            const errorBox = document.getElementById('loginError');
            if (errorBox) {
                errorBox.textContent = loginErrorParam;
                errorBox.classList.remove('d-none');
            }
            if (loginModalEl) {
                const modal = new bootstrap.Modal(loginModalEl);
                modal.show();
            }
            params.delete('login_error');
            const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '') + window.location.hash;
            window.history.replaceState(null, '', newUrl);
        }
    </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