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">
    <title>Contador Francisco</title>
    <meta name="theme-color" content="#2563eb">
    <link rel="icon" type="image/png" href="images/logo.png">
    <link rel="manifest" href="manifest.json">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --light: #ecf0f1;
            --dark: #2c3e50;
            --text: #333;
            --white: #fff;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            color: var(--text);
            line-height: 1.6;
            background-color: #f9f9f9;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header */
        header {
            background-color: var(--white);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo img {
            height: 50px;
            margin-right: 10px;
        }
        
        .logo-text {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .logo-text span {
            color: var(--secondary);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin-left: 30px;
        }
        
        nav ul li a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 600;
            transition: color 0.3s;
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.08rem;
        }
        .install-btn {
            border: 1px solid var(--secondary);
            border-radius: 28px;
            padding: 10px 22px;
            background: #fff;
            color: var(--secondary);
            font-weight: 700;
            cursor: pointer;
            transition: background 0.3s, color 0.3s, box-shadow 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 1.05rem;
        }
        .install-btn:hover,
        .install-btn:focus {
            background: var(--secondary);
            color: #fff;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
            outline: none;
        }
        .install-btn.hidden {
            display: none !important;
        }
        
        nav ul li a i {
            font-size: 1.18em;
            color: var(--secondary);
            transition: color 0.3s;
        }
        
        /* Estilo especial para el icono de software */
        nav ul li a[href="#clients"] i {
            color: #3498db;
            transition: all 0.3s ease;
        }
        
        nav ul li a[href="#clients"]:hover i {
            color: #2980b9;
            transform: scale(1.1);
        }
        
        nav ul li a:hover i {
            color: var(--accent);
        }
        
        nav ul li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--secondary);
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }
        
        nav ul li a:hover::after {
            width: 100%;
        }
        
        .mobile-menu {
            display: block;
            font-size: 2rem;
            cursor: pointer;
            margin-left: 0;
            margin-right: 10px;
            padding: 8px 14px 8px 0;
            background: none;
            border: none;
            outline: none;
            transition: background 0.2s;
        }
        
        .mobile-menu:active, .mobile-menu:focus {
            background: rgba(52,152,219,0.08);
            border-radius: 50%;
        }
        
        @media (min-width: 769px) {
            .mobile-menu {
                display: none;
            }
        }
        
        /* Hero Section */
        .hero {
            background: url('images/portada2.jpg') center/cover no-repeat;
            color: var(--white);
            min-height: 100vh;
            height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            padding: 0;
        }
        .hero::after {
            display: none;
        }
        .hero .container {
            position: relative;
            z-index: 2;
            max-width: 700px;
            background: rgba(44,62,80,0.35);
            border-radius: 24px;
            padding: 64px 32px 56px 32px;
            box-shadow: 0 8px 32px rgba(44,62,80,0.18);
            backdrop-filter: blur(2px);
        }
        .hero h1 {
            font-size: 3.7rem;
            margin-bottom: 24px;
            font-weight: 800;
            letter-spacing: 1px;
            text-shadow: 0 4px 24px rgba(44,62,80,0.45), 0 1px 0 #fff2;
        }
        .hero p {
            font-size: 1.5rem;
            margin-bottom: 38px;
            color: #f1f1f1;
            text-shadow: 0 2px 8px rgba(44,62,80,0.25);
        }
        .hero .btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 1.25rem;
            padding: 18px 48px;
            border-radius: 40px;
            font-weight: 700;
            background: linear-gradient(90deg, #25d366 0%, #128c7e 100%);
            color: #fff;
            box-shadow: 0 4px 16px rgba(44,62,80,0.18);
            border: none;
            cursor: pointer;
            transition: background 0.3s, transform 0.2s;
            text-shadow: 0 2px 8px rgba(44,62,80,0.18);
            text-decoration: none;
        }
        .hero .btn i {
            font-size: 1.5em;
            animation: whatsapp-bounce 1.2s infinite alternate;
        }
        .hero .btn:hover {
            background: linear-gradient(90deg, #128c7e 0%, #25d366 100%);
            transform: translateY(-3px) scale(1.04);
            text-decoration: none;
        }
        @keyframes whatsapp-bounce {
            0% { transform: translateY(0); }
            100% { transform: translateY(-4px) scale(1.15); }
        }
        @media (max-width: 992px) {
            .hero {
                min-height: 100vh;
                height: 100dvh;
            }
            .hero .container {
                padding: 32px 8px 24px 8px;
                max-width: 98vw;
            }
            .hero h1 {
                font-size: 2.3rem;
            }
            .hero p {
                font-size: 1.1rem;
            }
        }
        @media (max-width: 576px) {
            .hero {
                min-height: 100vh;
                height: 100dvh;
                padding: 0;
            }
            .hero .container {
                padding: 18vw 2vw 10vw 2vw;
                max-width: 99vw;
            }
            .hero h1 {
                font-size: 1.3rem;
            }
            .hero p {
                font-size: 0.95rem;
            }
        }
        
        /* Sections */
        section {
            padding: 80px 0;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--primary);
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 3px;
            background: var(--secondary);
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
        /* About Us Mejorado */
        .about-section {
            background: linear-gradient(120deg, #f7fafc 70%, #eaf6fb 100%);
            border-radius: 18px;
            box-shadow: 0 4px 32px rgba(44,62,80,0.07);
            padding: 48px 32px;
            margin-bottom: 40px;
            position: relative;
        }
        .about-section .about-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            font-size: 2.7rem;
            color: var(--primary);
            font-weight: 800;
            text-align: center;
            margin-bottom: 28px;
            position: relative;
        }
        .about-section .about-title i {
            color: var(--accent);
            font-size: 1.3em;
        }
        .about-section .about-title::after {
            content: '';
            position: absolute;
            width: 70px;
            height: 4px;
            background: linear-gradient(90deg, var(--secondary), var(--accent));
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }
        .about-section .about-text p {
            font-size: 1.18rem;
            margin-bottom: 18px;
            color: #2c3e50;
            line-height: 1.7;
        }
        .about-section .about-text p strong,
        .about-section .about-text p .resaltar {
            color: var(--accent);
            font-weight: 700;
        }
        @media (max-width: 768px) {
            .about-section {
                padding: 28px 8px;
            }
            .about-section .about-title {
                font-size: 2rem;
            }
        }
        
        /* About Us */
        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .about-text {
            flex: 1;
        }
        
        .about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s;
        }
        
        .about-image:hover img {
            transform: scale(1.05);
        }
        
        /* Team */
        .team-grid {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: stretch;
            gap: 30px;
            flex-wrap: wrap;
        }
        .team-member {
            background: linear-gradient(135deg, #f7fafc 60%, #eaf6fb 100%);
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 6px 32px rgba(44,62,80,0.10), 0 1.5px 8px rgba(39,174,96,0.10);
            transition: transform 0.35s cubic-bezier(.4,2,.3,1), box-shadow 0.35s, border 0.3s;
            text-align: center;
            max-width: 350px;
            margin: 0 auto;
            border: 3px solid #eaf6fb;
            position: relative;
            z-index: 1;
        }
        .team-member:hover {
            transform: translateY(-12px) scale(1.035);
            box-shadow: 0 16px 40px rgba(44,62,80,0.18), 0 2px 12px rgba(39,174,96,0.13);
            border: 3px solid #3498db;
        }
        .member-image {
            width: 120px;
            height: 120px;
            margin: 0 auto;
            margin-top: 32px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 4px 18px rgba(44,62,80,0.13);
            border: 4px solid #fff;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: box-shadow 0.3s, border 0.3s, transform 0.4s cubic-bezier(.4,2,.3,1);
        }
        .team-member:hover .member-image {
            box-shadow: 0 8px 32px rgba(39,174,96,0.18), 0 2px 12px rgba(44,62,80,0.13);
            border: 4px solid #3498db;
            transform: scale(1.08) rotate(-2deg);
        }
        .member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 50%;
            transition: transform 0.5s cubic-bezier(.4,2,.3,1);
        }
        .team-member:hover .member-image img {
            transform: scale(1.10) rotate(2deg);
        }
        .member-info {
            padding: 28px 20px 32px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .member-info h3 {
            margin-bottom: 6px;
            color: var(--primary);
            font-size: 1.25rem;
            font-weight: 800;
            letter-spacing: 0.5px;
        }
        .member-info p {
            color: var(--secondary);
            font-weight: 600;
            margin-bottom: 18px;
            font-size: 1.05rem;
        }
        .social-links {
            display: flex;
            justify-content: center;
            gap: 18px;
            margin-top: 8px;
        }
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: #fff;
            background: var(--secondary);
            transition: all 0.3s, box-shadow 0.3s;
            text-decoration: none;
            font-size: 1.25rem;
            box-shadow: 0 2px 8px rgba(44,62,80,0.10);
        }
        .social-links a:hover {
            background: var(--accent);
            color: #fff;
            transform: scale(1.13) rotate(-8deg);
            box-shadow: 0 4px 16px rgba(231,76,60,0.18);
        }
        @media (max-width: 992px) {
            .team-grid {
                flex-direction: column;
                align-items: center;
            }
            .team-member {
                max-width: 400px;
            }
        }
        @media (max-width: 576px) {
            .team-grid {
                flex-direction: column;
                align-items: center;
                gap: 18px;
            }
            .team-member {
                max-width: 98vw;
                margin: 0 auto;
                border-radius: 18px;
            }
            .member-image {
                width: 90px;
                height: 90px;
                margin-top: 18px;
                border-radius: 50%;
            }
            .member-info {
                padding: 18px 8px 22px 8px;
            }
            .member-info h3 {
                font-size: 1.05rem;
            }
            .member-info p {
                font-size: 0.98rem;
            }
            .social-links a {
                width: 34px;
                height: 34px;
                font-size: 1.1rem;
            }
        }
        
        /* Servicios Flip Card Mejorado */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
            gap: 36px;
        }
        .flip-card {
            perspective: 1200px;
            width: 100%;
            /* Permitir que la tarjeta crezca según el contenido */
            height: auto;
            display: flex;
            align-items: stretch;
        }
        .flip-card-inner {
            position: relative;
            width: 100%;
            /* Altura se ajustará dinámicamente por JS */
            height: auto;
            transition: transform 0.7s cubic-bezier(.4,2,.3,1);
            transform-style: preserve-3d;
            display: flex;
            overflow: visible;
        }
        .flip-card.flipped .flip-card-inner {
            transform: rotateY(180deg);
        }
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 14px;
            box-shadow: 0 5px 18px rgba(44,62,80,0.09);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 25px 20px 25px 20px;
            text-align: center;
            /* No forzar scroll interno en las caras */
            overflow: visible;
        }
        .flip-card-front .service-icon {
            margin-bottom: 18px;
        }
        .flip-card-front h3 {
            margin-bottom: 12px;
            color: var(--primary);
            font-size: 1.25rem;
            font-weight: 700;
        }
        .flip-card-front .service-description-scroll {
            /* Mostrar descripción completa sin scroll */
            max-height: none;
            min-height: 0;
            overflow: visible;
            width: 100%;
            margin-bottom: 18px;
            font-size: 1rem;
            color: #444;
            padding: 14px 16px;
            scrollbar-width: thin;
            scrollbar-color: #3498db #f7fafc;
            background: rgba(52,152,219,0.03);
            border-radius: 8px;
            transition: box-shadow 0.2s;
            line-height: 1.5;
            text-align: left;
        }
        .flip-card-front .service-description-scroll:focus,
        .flip-card-front .service-description-scroll:hover {
            box-shadow: 0 0 0 2px #3498db33;
        }
        .flip-card-front .service-description-scroll::-webkit-scrollbar {
            width: 7px;
            background: #f7fafc;
            border-radius: 8px;
        }
        .flip-card-front .service-description-scroll::-webkit-scrollbar-thumb {
            background: #3498db;
            border-radius: 8px;
        }
        @media (max-width: 576px) {
            .flip-card {
                /* Mantener responsive sin limitar altura */
                height: auto !important;
            }
            .flip-card-inner {
                height: auto !important;
                overflow: visible;
            }
            .flip-card-front .service-description-scroll {
                /* Sin límites en móvil */
                max-height: none !important;
                min-height: 0 !important;
                font-size: 0.95rem;
                padding: 10px 12px;
                line-height: 1.4;
                overflow: visible !important;
            }
            .flip-card-front, .flip-card-back {
                position: relative;
                overflow: visible;
            }
        }
        .flip-card-back {
            background: linear-gradient(135deg, #eafbe7 60%, #f7fafc 100%);
            transform: rotateY(180deg);
            z-index: 3;
            border: 2.5px solid #27ae60;
            box-shadow: 0 8px 32px rgba(39,174,96,0.10);
        }
        .service-icon {
            font-size: 2.7rem;
            color: var(--secondary);
            margin-bottom: 18px;
            max-width: 80px;
            max-height: 80px;
            padding: 10px;
            background: #f7fafc;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(44,62,80,0.08);
        }
        .flip-btn {
            margin-top: 8px;
            background: var(--secondary);
            color: #fff;
            border: none;
            border-radius: 20px;
            padding: 7px 18px;
            font-size: 0.98rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s, transform 0.2s;
            box-shadow: 0 2px 8px rgba(44,62,80,0.07);
        }
        .flip-btn:hover {
            background: var(--accent);
            transform: scale(1.07);
        }
        .service-price-label {
            font-size: 1.1rem;
            color: #27ae60;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .service-price {
            font-size: 2.2rem;
            color: #27ae60;
            font-weight: 900;
            margin-bottom: 10px;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .service-price i {
            font-size: 1.5em;
            color: #27ae60;
            animation: money-bounce 1.2s infinite alternate;
        }
        @keyframes money-bounce {
            0% { transform: translateY(0); }
            100% { transform: translateY(-6px) scale(1.13); }
        }
        .flip-card-back .flip-btn {
            background: #27ae60;
            margin-top: 18px;
        }
        .flip-card-back .flip-btn:hover {
            background: var(--secondary);
        }
        @media (max-width: 992px) {
            .flip-card, .flip-card-inner {
                /* Dejar que la altura sea natural */
                height: auto;
            }
        }
        @media (max-width: 576px) {
            .services-grid {
                /* Pila vertical con ESPACIO EXTRA entre cards */
                display: grid;
                grid-template-columns: 1fr;
                gap: 80px; /* Aumentado de 56px */
                padding: 0 4vw 24px 4vw; /* Ajuste de padding lateral */
                margin: 0 auto;
                max-width: 100%;
            }
            .flip-card {
                /* Espacio generoso para contenido extenso */
                min-height: auto !important; /* Altura automática */
                height: auto !important;
                width: 100% !important;
                max-width: 92vw !important; /* Ancho casi completo */
                margin: 0 auto;
                box-shadow: none; /* Eliminada la sombra */
                border-radius: 22px;
                background: linear-gradient(120deg, #eaf6fb 60%, #f7fafc 100%);
                transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                display: flex;
                align-items: stretch;
                overflow: visible;
                position: relative;
                padding-bottom: 40px; /* Espacio extra en la parte inferior */
            }
            .flip-card-inner {
                min-height: 480px !important; /* Mayor altura mínima */
                height: auto !important;
                width: 100% !important;
                max-width: 100% !important;
                position: relative;
                transition: transform 0.7s cubic-bezier(.4,2,.3,1);
                transform-style: preserve-3d;
                display: flex;
                padding: 0; /* Reset padding */
            }
            .flip-card-front, .flip-card-back {
                position: absolute !important;
                width: 100%;
                height: 100%;
                min-height: 480px !important; /* Mayor altura */
                padding: 32px 7vw 36px 7vw; /* Más padding en todos lados */
                box-shadow: none; /* Eliminada la sombra */
                border-radius: 18px;
                margin-bottom: 0;
                background: #fff;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                overflow: visible;
                animation: none !important;
                /* Altura se ajustará por JS */
            }
            .flip-card-front {
                z-index: 2;
            }
            .flip-card-back {
                z-index: 3;
                background: linear-gradient(135deg, #eafbe7 60%, #f7fafc 100%);
                border: 2.5px solid #27ae60;
                box-shadow: 0 8px 32px rgba(39,174,96,0.10);
                transform: rotateY(180deg);
            }
            .service-price {
                font-size: 1.3rem;
            }
            .flip-btn {
                font-size: 1.05rem;
                padding: 10px 22px;
                margin-top: 12px;
                border-radius: 30px;
                box-shadow: 0 2px 8px rgba(44,62,80,0.10);
                background: linear-gradient(90deg, #25d366 0%, #128c7e 100%);
                color: #fff;
                font-weight: 700;
                transition: background 0.2s, transform 0.2s;
            }
            .flip-btn:hover {
                background: linear-gradient(90deg, #128c7e 0%, #25d366 100%);
                transform: scale(1.08);
            }
            .service-icon {
                font-size: 2.2rem;
                margin-bottom: 18px;
                padding: 6px;
                background: #f7fafc;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 8px rgba(44,62,80,0.08);
            }
            .flip-card-front .service-description-scroll {
                max-height: none;
                font-size: 0.97rem;
            }
        }
        
        /* Clients */
        .clients-slider {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px;
            align-items: center;
        }
        
        .client-logo {
            max-width: 150px;
            filter: grayscale(100%);
            opacity: 0.7;
            transition: all 0.3s;
        }
        
        .client-logo:hover {
            filter: grayscale(0%);
            opacity: 1;
        }
        
        /* Contact */
        .contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 50px;
        }
        
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        
        .contact-icon {
            font-size: 1.5rem;
            color: var(--secondary);
        }
        
        .contact-text h3 {
            margin-bottom: 5px;
            color: var(--primary);
        }
        
        .contact-form {
            background: linear-gradient(135deg, #f7fafc 70%, #eaf6fb 100%);
            padding: 38px 28px 32px 28px;
            border-radius: 18px;
            box-shadow: 0 8px 32px rgba(44,62,80,0.10), 0 1.5px 8px rgba(39,174,96,0.10);
            border: 2.5px solid #eaf6fb;
            max-width: 480px;
            margin: 0 auto;
            position: relative;
        }
        .contact-form:before {
            content: '';
            position: absolute;
            top: -18px; left: -18px; right: -18px; bottom: -18px;
            border-radius: 24px;
            background: linear-gradient(120deg, #25d36622 0%, #128c7e11 100%);
            z-index: 0;
        }
        .contact-form form {
            position: relative;
            z-index: 1;
        }
        .form-group {
            margin-bottom: 22px;
            position: relative;
        }
        .form-group label {
            display: block;
            margin-bottom: 7px;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: 0.2px;
        }
        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 13px 16px 13px 44px;
            border: 1.5px solid #cfd8dc;
            border-radius: 8px;
            font-size: 1.05rem;
            transition: border-color 0.3s, box-shadow 0.3s;
            background: #fff;
            color: var(--primary);
            box-shadow: 0 2px 8px rgba(44,62,80,0.04);
        }
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: var(--secondary);
            outline: none;
            box-shadow: 0 0 0 2px #3498db33;
        }
        .form-group textarea {
            min-height: 110px;
            resize: vertical;
        }
        .form-group .input-icon {
            position: absolute;
            left: 12px;
            top: 38px;
            font-size: 1.18rem;
            color: var(--secondary);
            opacity: 0.7;
            pointer-events: none;
        }
        .form-group select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg fill="%233498db" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 22px 22px;
            cursor: pointer;
        }
        
        .form-group select option {
            padding: 8px 12px;
            font-size: 1rem;
            background: #fff;
            color: var(--primary);
        }
        
        .form-group select option:hover {
            background-color: var(--secondary);
            color: white;
        }
        
        .form-group select option:checked {
            background-color: var(--secondary);
            color: white;
        }
        .contact-form .btn-whatsapp {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 1.18rem;
            padding: 16px 0;
            width: 100%;
            border-radius: 32px;
            font-weight: 800;
            background: linear-gradient(90deg, #25d366 0%, #128c7e 100%);
            color: #fff;
            box-shadow: 0 4px 18px rgba(37,211,102,0.13);
            border: none;
            cursor: pointer;
            transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
            margin-top: 10px;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }
        .contact-form .btn-whatsapp i {
            font-size: 1.7em;
            animation: whatsapp-bounce 1.2s infinite alternate;
        }
        .contact-form .btn-whatsapp:hover {
            background: linear-gradient(90deg, #128c7e 0%, #25d366 100%);
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 8px 32px rgba(37,211,102,0.18);
        }
        @media (max-width: 576px) {
            .contact-form {
                padding: 18px 4vw 18px 4vw;
                max-width: 99vw;
            }
            .form-group label {
                font-size: 0.98rem;
            }
            .contact-form .btn-whatsapp {
                font-size: 1.05rem;
                padding: 13px 0;
            }
        }
        
        /* Footer */
        footer {
            background: linear-gradient(120deg, #232946 60%, #2c3e50 100%);
            color: var(--white);
            padding: 0;
            position: relative;
            overflow: hidden;
        }
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
            padding: 70px 0 0 0;
            position: relative;
            z-index: 3;
        }
        .footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
            color: #f7fafc;
            letter-spacing: 1px;
        }
        .footer-col h3::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 2.5px;
            background: linear-gradient(90deg, var(--secondary), var(--accent));
            bottom: 0;
            left: 0;
            border-radius: 2px;
        }
        .footer-col p {
            margin-bottom: 15px;
            opacity: 0.85;
            color: #eaf6fb;
        }
        .footer-links {
            list-style: none;
        }
        .footer-links li {
            margin-bottom: 10px;
        }
        .footer-links a {
            color: #eaf6fb;
            text-decoration: none;
            opacity: 0.85;
            transition: opacity 0.3s, color 0.3s;
            font-weight: 500;
        }
        .footer-links a:hover {
            opacity: 1;
            color: var(--secondary);
            text-decoration: underline;
        }
        .footer-social {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        .footer-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.13);
            color: var(--white);
            transition: all 0.3s, box-shadow 0.3s;
            text-decoration: none;
            font-size: 1.25rem;
            box-shadow: 0 2px 8px rgba(44,62,80,0.10);
        }
        .footer-social a:hover {
            background: var(--secondary);
            color: #fff;
            transform: scale(1.13) rotate(-8deg);
            box-shadow: 0 4px 16px rgba(52,152,219,0.18);
        }
        .footer-col .footer-social a {
            margin-bottom: 0;
        }
        .footer-col:last-child p {
            font-size: 1.01rem;
        }
        .footer-bottom {
            background: linear-gradient(90deg, #232946 60%, #2c3e50 100%);
            padding: 22px 0 12px 0;
            text-align: center;
            border-top: 1.5px solid rgba(255,255,255,0.08);
            position: relative;
            z-index: 3;
        }
        .footer-bottom p {
            color: #eaf6fb;
            opacity: 0.85;
            font-size: 1.01rem;
            margin: 0 0 4px 0;
        }
        .footer-bottom .footer-creator {
            color: #fff;
            font-weight: 700;
            letter-spacing: 0.5px;
            font-size: 1.08rem;
        }
        .footer-bottom .footer-creator a {
            color: #00ffd0;
            background: linear-gradient(90deg, #00ffd0 0%, #3498db 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
            text-decoration: none;
            font-weight: 900;
            transition: color 0.3s, text-shadow 0.3s;
            text-shadow: 0 2px 12px #00ffd055;
            position: relative;
        }
        .footer-bottom .footer-creator a:hover {
            color: #fff;
            background: linear-gradient(90deg, #3498db 0%, #00ffd0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow: 0 4px 18px #3498db88;
            filter: brightness(1.2) drop-shadow(0 0 6px #00ffd0);
            letter-spacing: 1.5px;
        }
        @media (max-width: 768px) {
            .footer-container {
                grid-template-columns: 1fr;
                gap: 18px;
                padding: 38px 0 0 0;
            }
            .footer-col h3 {
                font-size: 1.08rem;
            }
            .footer-bottom p, .footer-bottom .footer-creator {
                font-size: 0.98rem;
            }
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
            }
            
            .about-text,
            .about-image {
                flex: none;
                width: 100%;
            }
            
            .about-image {
                margin-top: 30px;
            }
        }
        
        @media (max-width: 768px) {
            .header-container {
                padding-left: 8px;
                padding-right: 8px;
            }
            .logo {
                margin-right: auto;
            }
            .mobile-menu {
                order: 2;
                margin-left: 0;
                margin-right: 0;
            }
            
            nav {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 80%;
                height: calc(100vh - 80px);
                background: var(--white);
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
                transition: left 0.3s;
                z-index: 999;
            }
            
            nav.active {
                left: 0;
            }
            
            nav ul {
                display: flex;
                flex-direction: column;
                gap: 0;
                padding: 10px 0 10px 0;
                align-items: stretch;
                justify-items: stretch;
            }
            
            nav ul li {
                margin: 0;
                width: 100%;
                display: block;
            }
            nav ul li a {
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                font-size: 1.05rem;
                padding: 10px 18px;
                border-radius: 8px;
                min-width: 0;
                min-height: 0;
                box-shadow: none;
                gap: 12px;
                transition: background 0.2s, color 0.2s;
            }
            nav ul li a:hover, nav ul li a:active {
                background: #f2f8fc;
                color: var(--secondary);
            }
            nav ul li a i {
                font-size: 1.15em;
                margin-bottom: 0;
            }
            nav ul li a span {
                display: inline;
            }
            
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .hero .container {
                padding: 32px 10px 28px 10px;
            }
            
            section {
                padding: 60px 0;
            }
            
            nav.active .mobile-profile {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 32px 0 18px 0;
                background: linear-gradient(135deg, #eaf6fb 60%, #f9f9f9 100%);
                border-bottom: 1px solid #e0e0e0;
                box-shadow: 0 2px 12px rgba(44,62,80,0.07);
            }
            .mobile-profile-img {
                width: 90px;
                height: 90px;
                border-radius: 50%;
                object-fit: cover;
                box-shadow: 0 4px 16px rgba(44,62,80,0.13);
                border: 4px solid #fff;
                margin-bottom: 10px;
                background: #fff;
            }
            .mobile-profile-name {
                font-size: 1.15rem;
                font-weight: 700;
                color: var(--primary);
                letter-spacing: 0.5px;
                text-align: center;
                margin-bottom: 2px;
            }
        }
        
        @media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
        }
        
        .mobile-profile {
            display: none;
        }
        @media (max-width: 768px) {
            nav.active .mobile-profile {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 32px 0 18px 0;
                background: linear-gradient(135deg, #eaf6fb 60%, #f9f9f9 100%);
                border-bottom: 1px solid #e0e0e0;
                box-shadow: 0 2px 12px rgba(44,62,80,0.07);
            }
        }
        @media (min-width: 769px) {
            .mobile-profile {
                display: none !important;
            }
        }
        .typewriter {
            display: inline-block;
            color: var(--primary);
            font-weight: 700;
            position: relative;
        }
        .typewriter-text {
            border-right: 2.5px solid var(--secondary);
            padding-right: 4px;
            white-space: nowrap;
            overflow: hidden;
            animation: blink-cursor 0.7s steps(1) infinite;
        }
        @keyframes blink-cursor {
            0%, 100% { border-color: var(--secondary); }
            50% { border-color: transparent; }
        }
        .whatsapp-link {
            background: linear-gradient(135deg, #25d366 60%, #128c7e 100%) !important;
            color: #fff !important;
            box-shadow: 0 2px 12px rgba(37,211,102,0.18);
            border: 2px solid #25d366;
            animation: whatsapp-bounce 1.2s infinite alternate;
        }
        .whatsapp-link:hover {
            background: linear-gradient(135deg, #128c7e 60%, #25d366 100%) !important;
            color: #fff !important;
            border: 2px solid #128c7e;
            transform: scale(1.18) rotate(-8deg);
            box-shadow: 0 4px 18px rgba(37,211,102,0.25);
        }
        @keyframes whatsapp-bounce {
            0% { transform: translateY(0); }
            100% { transform: translateY(-4px) scale(1.10); }
        }
        .facebook-link {
            background: linear-gradient(135deg, #1877f2 60%, #4267b2 100%) !important;
            color: #fff !important;
            border: 2px solid #1877f2;
            box-shadow: 0 2px 12px rgba(24,119,242,0.13);
            transition: all 0.3s, box-shadow 0.3s;
        }
        .facebook-link:hover {
            background: linear-gradient(135deg, #4267b2 60%, #1877f2 100%) !important;
            color: #fff !important;
            border: 2px solid #4267b2;
            transform: scale(1.18) rotate(-8deg);
            box-shadow: 0 4px 18px rgba(24,119,242,0.22);
        }
        .instagram-link {
            background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
            color: #fff !important;
            border: 2px solid #d6249f;
            box-shadow: 0 2px 12px rgba(214,36,159,0.13);
            transition: all 0.3s, box-shadow 0.3s;
        }
        .instagram-link:hover {
            background: radial-gradient(circle at 30% 110%, #fd5949 0%, #d6249f 45%, #285AEB 90%) !important;
            color: #fff !important;
            border: 2px solid #fd5949;
            transform: scale(1.18) rotate(-8deg);
            box-shadow: 0 4px 18px rgba(214,36,159,0.22);
        }
        .tiktok-link {
            background: linear-gradient(135deg, #010101 60%, #69C9D0 100%) !important;
            color: #fff !important;
            border: 2px solid #010101;
            box-shadow: 0 2px 12px rgba(105,201,208,0.13);
            transition: all 0.3s, box-shadow 0.3s;
        }
        .tiktok-link:hover {
            background: linear-gradient(135deg, #69C9D0 60%, #010101 100%) !important;
            color: #fff !important;
            border: 2px solid #69C9D0;
            transform: scale(1.18) rotate(-8deg);
            box-shadow: 0 4px 18px rgba(105,201,208,0.22);
        }
        .youtube-link {
            background: linear-gradient(135deg, #ff0000 60%, #c4302b 100%) !important;
            color: #fff !important;
            border: 2px solid #ff0000;
            box-shadow: 0 2px 12px rgba(255,0,0,0.13);
            transition: all 0.3s, box-shadow 0.3s;
        }
        .youtube-link:hover {
            background: linear-gradient(135deg, #c4302b 60%, #ff0000 100%) !important;
            color: #fff !important;
            border: 2px solid #c4302b;
            transform: scale(1.18) rotate(-8deg);
            box-shadow: 0 4px 18px rgba(255,0,0,0.22);
        }
        /* Partners Cards */
        .partners-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 38px;
            justify-content: center;
            align-items: stretch;
            margin-top: 18px;
        }
        .partner-card {
            background: linear-gradient(135deg, #f7fafc 70%, #eaf6fb 100%);
            border-radius: 22px;
            box-shadow: 0 6px 32px rgba(44,62,80,0.10), 0 1.5px 8px rgba(39,174,96,0.10);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.35s cubic-bezier(.4,2,.3,1), box-shadow 0.35s;
            border: 2.5px solid #eaf6fb;
            position: relative;
        }
        .partner-card:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 16px 40px rgba(44,62,80,0.18), 0 2px 12px rgba(39,174,96,0.13);
            border: 2.5px solid #27ae60;
        }
        .partner-image {
            width: 100%;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px 0 18px 0;
            min-height: 180px;
        }
        .partner-image img {
            max-width: 220px;
            width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(44,62,80,0.08);
            transition: transform 0.4s cubic-bezier(.4,2,.3,1);
        }
        .partner-card:hover .partner-image img {
            transform: scale(1.07) rotate(-2deg);
        }
        .partner-info {
            padding: 18px 24px 28px 24px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .partner-title {
            font-size: 1.18rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 12px;
            text-align: center;
        }
        .partner-features {
            list-style: none;
            padding: 0;
            margin: 0 0 18px 0;
            color: #2c3e50;
            font-size: 1.05rem;
            text-align: left;
        }
        .partner-features li {
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .partner-price {
            font-size: 2rem;
            color: #27ae60;
            font-weight: 900;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 8px;
            background: #eafbe7;
            border-radius: 16px;
            padding: 8px 24px;
            box-shadow: 0 2px 8px rgba(39,174,96,0.10);
        }
        .partner-price i {
            font-size: 1.5em;
            color: #27ae60;
            animation: money-bounce 1.2s infinite alternate;
        }
        @media (max-width: 768px) {
            .partners-grid {
                grid-template-columns: 1fr;
                gap: 22px;
            }
            .partner-card {
                max-width: 98vw;
                margin: 0 auto;
            }
            .partner-image {
                padding: 18px 0 10px 0;
                min-height: 120px;
            }
            .partner-info {
                padding: 12px 8px 18px 8px;
            }
            .partner-title {
                font-size: 1.05rem;
            }
            .partner-price {
                font-size: 1.3rem;
                padding: 7px 12px;
            }
        }
        /* Lightbox Socios */
        .partner-lightbox {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0; left: 0; width: 100vw; height: 100vh;
            align-items: center;
            justify-content: center;
        }
        .partner-lightbox.active {
            display: flex;
            animation: lightbox-fadein 0.3s;
        }
        .lightbox-backdrop {
            position: absolute;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(44,62,80,0.85);
            z-index: 1;
            animation: lightbox-backdrop-fade 0.3s;
        }
        .lightbox-content {
            position: relative;
            z-index: 2;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 8px 40px rgba(44,62,80,0.25);
            padding: 18px 18px 8px 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            animation: lightbox-zoom 0.35s cubic-bezier(.4,2,.3,1);
            max-width: 96vw;
            max-height: 90vh;
        }
        .lightbox-content img {
            max-width: 80vw;
            max-height: 70vh;
            border-radius: 12px;
            box-shadow: 0 2px 18px rgba(44,62,80,0.18);
            object-fit: contain;
            background: #f7fafc;
            transition: box-shadow 0.3s;
        }
        .lightbox-close {
            position: absolute;
            top: 8px; right: 18px;
            font-size: 2.2rem;
            color: #e74c3c;
            cursor: pointer;
            font-weight: 900;
            z-index: 3;
            transition: color 0.2s, transform 0.2s;
        }
        .lightbox-close:hover {
            color: #c0392b;
            transform: scale(1.18) rotate(8deg);
        }
        @keyframes lightbox-fadein {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes lightbox-backdrop-fade {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes lightbox-zoom {
            0% { transform: scale(0.92) translateY(40px); opacity: 0; }
            100% { transform: scale(1) translateY(0); opacity: 1; }
        }
        @media (max-width: 768px) {
            .lightbox-content img {
                max-width: 96vw;
                max-height: 50vh;
            }
            .lightbox-content {
                padding: 8px 2vw 4px 2vw;
            }
        }
        .payment-methods-flex {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .payment-card {
            background: linear-gradient(120deg, #f7fafc 70%, #eaf6fb 100%);
            border-radius: 28px;
            box-shadow: 0 8px 32px rgba(44,62,80,0.13);
            padding: 48px 38px 38px 38px;
            max-width: 480px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            overflow: visible;
            margin-bottom: 0;
            animation: fadeInUp 1s;
        }
        .paypal-img-glow {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            width: 210px;
            height: 110px;
            z-index: 2;
        }
        .paypal-img {
            width: 200px;
            height: auto;
            border-radius: 18px;
            box-shadow: none;
            background: none;
            z-index: 2;
            position: relative;
            transition: transform 0.3s;
        }
        .paypal-img-glow .glow {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 220px;
            height: 120px;
            transform: translate(-50%, -50%);
            border-radius: 22px;
            background: radial-gradient(circle, #1877f2 0%, #eaf6fb 80%, transparent 100%);
            filter: blur(18px);
            opacity: 0.55;
            z-index: 1;
            animation: glow-anim 2.5s infinite alternate;
            pointer-events: none;
        }
        @keyframes glow-anim {
            0% { opacity: 0.55; filter: blur(18px); }
            100% { opacity: 0.85; filter: blur(28px); }
        }
        .payment-label {
            font-size: 1.25rem;
            color: #232946;
            font-weight: 700;
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        }
        .payment-account {
            font-size: 1.35rem;
            color: #1877f2;
            font-weight: 900;
            background: #eaf6fb;
            border-radius: 14px;
            padding: 12px 22px;
            box-shadow: 0 2px 8px #1877f233;
            margin-bottom: 10px;
            user-select: all;
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: thin;
            scrollbar-color: #1877f2 #eaf6fb;
            position: relative;
        }
        .payment-account::-webkit-scrollbar {
            height: 6px;
        }
        .payment-account::-webkit-scrollbar-thumb {
            background: #1877f2;
            border-radius: 6px;
        }
        .payment-account::-webkit-scrollbar-track {
            background: #eaf6fb;
            border-radius: 6px;
        }
        .copy-btn {
            background: #1877f2;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 6px 10px;
            margin-left: 8px;
            cursor: pointer;
            font-size: 1.1em;
            display: flex;
            align-items: center;
            transition: background 0.2s, transform 0.2s;
        }
        .copy-btn:hover {
            background: #25d366;
            transform: scale(1.12);
        }
        .copy-success {
            position: absolute;
            top: -32px;
            right: 0;
            background: #25d366;
            color: #fff;
            padding: 4px 14px;
            border-radius: 12px;
            font-size: 0.98em;
            font-weight: 700;
            box-shadow: 0 2px 8px #25d36655;
            opacity: 0;
            pointer-events: none;
            animation: copyfade 1.2s;
        }
        @keyframes copyfade {
            0% { opacity: 0; transform: translateY(10px); }
            20% { opacity: 1; transform: translateY(0); }
            80% { opacity: 1; }
            100% { opacity: 0; transform: translateY(-10px); }
        }
        @media (max-width: 768px) {
            .payment-account {
                font-size: 0.98rem;
                padding: 10px 8px;
            }
            .copy-btn {
                font-size: 1em;
                padding: 5px 8px;
            }
        }
        .payment-note {
            margin-top: 12px;
            color: #27ae60;
            font-size: 1.13rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
            letter-spacing: 0.2px;
        }
        .payment-note i {
            font-size: 1.7em;
            color: #1877f2;
            animation: money-bounce 1.2s infinite alternate;
        }
        @media (max-width: 768px) {
            .payment-card {
                padding: 28px 8vw 22px 8vw;
                max-width: 99vw;
            }
            .paypal-img-glow {
                width: 98vw;
                max-width: 320px;
                height: 90px;
            }
            .paypal-img {
                width: 90vw;
                max-width: 300px;
            }
            .paypal-img-glow .glow {
                width: 110vw;
                max-width: 340px;
                height: 100px;
            }
            .payment-label {
                font-size: 1.08rem;
            }
            .payment-account {
                font-size: 0.98rem;
                padding: 10px 8px;
                word-break: break-all;
                overflow-wrap: anywhere;
                max-width: 100%;
            }
            .payment-note {
                font-size: 1.01rem;
            }
        }
        .toast-copiado {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            background: linear-gradient(90deg, #25d366 0%, #128c7e 100%);
            color: #fff;
            padding: 24px 38px;
            border-radius: 32px;
            box-shadow: 0 8px 32px rgba(44,62,80,0.18);
            font-size: 1.18rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 14px;
            z-index: 99999;
            opacity: 0;
            pointer-events: none;
            animation: none;
            transition: opacity 0.3s, transform 0.3s;
            min-width: 220px;
            max-width: 90vw;
            text-align: center;
        }
        .toast-copiado.show {
            display: flex !important;
            opacity: 1;
            pointer-events: auto;
            animation: toastIn 0.4s cubic-bezier(.4,2,.3,1);
            transform: translate(-50%, -50%) scale(1);
        }
        @media (max-width: 768px) {
            .toast-copiado {
                font-size: 1.01rem;
                padding: 16px 8vw;
                min-width: 0;
            }
        }
        .btn-ver-proyecto {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
            padding: 12px 28px;
            background: linear-gradient(90deg, #27ae60 0%, #3498db 100%);
            color: #fff;
            font-weight: 800;
            border-radius: 24px;
            text-decoration: none;
            box-shadow: 0 4px 18px #27ae6033;
            transition: background 0.2s, transform 0.2s;
            font-size: 1.08rem;
            letter-spacing: 0.5px;
        }
        .btn-ver-proyecto:hover {
            background: linear-gradient(90deg, #3498db 0%, #27ae60 100%) !important;
            transform: scale(1.08) rotate(-2deg);
            box-shadow: 0 8px 24px #27ae6033;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container header-container">
            <div class="logo">
                <img src="images/logo.png" alt="Logo Contador Francisco" class="logo-icon">
                <div class="logo-text"><span class="typewriter"><span id="typewriter-text" class="typewriter-text"></span></span> <span></span></div>
            </div>
            
            <div class="mobile-menu">
                <i class="fas fa-bars"></i>
            </div>
            
            <nav>
                <div class="mobile-profile">
                    <img src="images/1.jpg" alt="Francisco Ramírez" class="mobile-profile-img">
                    <div class="mobile-profile-name">Francisco Ramírez</div>
                </div>
                <ul>
                    <li><a href="#home"><i class="fas fa-home"></i><span>Inicio</span></a></li>
                    <li><a href="#about"><i class="fas fa-user"></i><span>Sobre Nosotros</span></a></li>
                    <li><a href="#team"><i class="fas fa-users"></i><span>Equipo</span></a></li>
                    <li><a href="#services"><i class="fas fa-briefcase"></i><span>Servicios</span></a></li>
                    <li><a href="#clients"><i class="fas fa-laptop-code"></i><span>Software</span></a></li>
                    <li><a href="login.html"><i class="fas fa-sign-in-alt"></i><span>Iniciar Sesión</span></a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="container">
            <h1>Soluciones Contables Integrales</h1>
            <p>Experto en asesoría financiera, contabilidad y consultoría empresarial para ayudarte a alcanzar tus metas financieras con transparencia y profesionalismo.</p>
            <a href="#contact" class="btn"><i class="fab fa-whatsapp"></i>Contáctame</a>
        </div>
    </section>

    <!-- About Us -->
    <section id="about">
        <div class="container about-section">
            <div class="about-title"><i class="fas fa-user-tie"></i>Conócenos</div>
            <div class="about-content">
                <div class="about-text">
                    <p><span class="resaltar">Somos una firma de contadores públicos</span> con más de <strong>15 años de experiencia</strong> en el mercado, comprometidos con la <strong>excelencia</strong> y la <strong>transparencia</strong> en nuestros servicios.</p>
                    <p>Nuestro equipo de profesionales altamente calificados está dedicado a brindar <strong>soluciones personalizadas</strong> que se adapten a las necesidades específicas de cada cliente, ya sean individuos, pequeñas empresas o grandes corporaciones.</p>
                    <p>Nos enorgullece ofrecer un <strong>servicio cercano</strong>, con atención personalizada y <span class="resaltar">soluciones innovadoras</span> que generen <strong>valor real</strong> para nuestros clientes.</p>
                </div>
                <div class="about-image">
                    <img src="images/fondo.jpg" alt="Equipo de trabajo">
                </div>
            </div>
        </div>
    </section>

    <!-- Team -->
    <section id="team" style="background-color: #f5f7fa;">
        <div class="container">
            <div class="section-title">
                <h2>Equipo de Trabajo</h2>
            </div>
            
            <div class="team-grid">
                <div class="team-member">
                    <div class="member-image">
                        <img src='images/1.jpg' alt="Contador 1">
                    </div>
                    <div class="member-info">
                        <h3>Francisco Pablo Ramírez Lazo</h3>
                        <p>Lic. Contabilidad Pública y Auditoría</p>
                        <div class="social-links">
                            <a href="https://wa.me/50558668096?text=%F0%9F%91%8B%20Hola%2C%20me%20gustar%C3%ADa%20recibir%20informaci%C3%B3n%20sobre%20sus%20servicios%20contables%20y%20asesor%C3%ADa.%20%F0%9F%92%B5%20%F0%9F%93%8A%20%F0%9F%91%8D" target="_blank" class="whatsapp-link" title="Contactar por WhatsApp"><i class="fab fa-whatsapp"></i></a>
                            <a href="https://www.facebook.com/francisco.pablo.ramirez.lazo?mibextid=ZbWKwL" target="_blank" class="facebook-link" title="Facebook"><i class="fab fa-facebook"></i></a>
                            <a href="https://www.instagram.com/fran1974ramirez" target="_blank" class="instagram-link" title="Instagram"><i class="fab fa-instagram"></i></a>
                            <a href="https://tiktok.com/@contarsa" target="_blank" class="tiktok-link" title="TikTok"><i class="fab fa-tiktok"></i></a>
                            <a href="https://youtube.com/@franciscopabloramirezlazo4577?si=7sAmYBud-SEOsQ6C" target="_blank" class="youtube-link" title="YouTube"><i class="fab fa-youtube"></i></a>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </section>

    <!-- Services -->
    <section id="services">
        <div class="container">
            <div class="section-title">
                <h2>Nuestros Servicios</h2>
            </div>
            <div id="services-dynamic" class="services-grid"></div>
        </div>
    </section>

    <!-- Clients (Proyectos) -->
    <section id="clients" style="background-color: #f5f7fa;">
        <div class="container">
            <div class="section-title">
                <h2>Nuestro Software</h2>
            </div>
            <div id="projects-dynamic" class="partners-grid"></div>
        </div>
        <!-- Lightbox para imágenes de socios -->
        <div id="partner-lightbox" class="partner-lightbox">
            <div class="lightbox-backdrop"></div>
            <div class="lightbox-content">
                <span class="lightbox-close" title="Cerrar">&times;</span>
                <img src="" alt="Socio" id="lightbox-img">
            </div>
        </div>
    </section>

    <!-- Clientes Satisfechos -->
    <section id="clientes-satisfechos" style="padding:70px 0;background:linear-gradient(120deg,#f7fafc 70%, #eaf6fb 100%);">
        <div class="container">
            <div class="section-title">
                <h2>Clientes Satisfechos</h2>
            </div>
            <div id="clientes-satisfechos-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;align-items:stretch;"></div>
        </div>
    </section>

    <!-- Métodos de Pago -->
    <section id="payment-methods" style="background: linear-gradient(120deg, #eaf6fb 60%, #f7fafc 100%); padding: 70px 0 60px 0;">
        <div class="container">
            <div class="section-title">
                <h2 style="color:#1877f2;">Métodos de Pago</h2>
            </div>
            <div class="payment-methods-flex">
                <div class="payment-card">
                    <div class="paypal-img-glow">
                        <img src="images/paypal2.png" alt="Paypal" class="paypal-img">
                        <div class="glow"></div>
                    </div>
                    <div class="payment-label">Cuenta</div>
                    <div class="payment-account">
                        <i class="fas fa-envelope"></i>
                        <span id="correo-paypal">franciscoramirezlazo776@gmail.com</span>
                        <button class="copy-btn" id="copy-paypal" title="Copiar correo"><i class="fas fa-copy"></i></button>
                    </div>
                    <div class="payment-note">
                        <i class="fab fa-paypal"></i>
                        ¡Aceptamos pagos vía Paypal!
                    </div>
                </div>
                <br>
                <br>
                <!-- BANPRO CARD INICIO -->
                <div class="payment-card" style="animation: fadeInUp 1s 0.2s; border: 2.5px solid #006341;">
                    <div class="paypal-img-glow">
                        <img src="images/banpro3.png" alt="Banpro" class="paypal-img" style="object-fit:contain; background:#fff;">
                        <div class="glow" style="background: radial-gradient(circle, #006341 0%, #eaf6fb 80%, transparent 100%);"></div>
                    </div>
                    <div class="payment-label">Titular</div>
                    <div class="payment-account" style="color:#006341;">
                        <i class="fas fa-user"></i>
                        <span id="banpro-titular">Francisco Pablo Ramirez Lazo</span>
                    </div>
                    <div class="payment-label" style="margin-top:18px;">Cuenta en Dólares (USD)</div>
                    <div class="payment-account">
                        <i class="fas fa-dollar-sign"></i>
                        <span id="banpro-usd">10024110023617</span>
                        <button class="copy-btn" id="copy-banpro-usd" title="Copiar cuenta USD"><i class="fas fa-copy"></i></button>
                    </div>
                    <div class="payment-label" style="margin-top:10px;">Cuenta en Córdobas (NIO)</div>
                    <div class="payment-account">
                        <i class="fas fa-coins"></i>
                        <span id="banpro-nio">10024100045506</span>
                        <button class="copy-btn" id="copy-banpro-nio" title="Copiar cuenta NIO"><i class="fas fa-copy"></i></button>
                    </div>
                    <div class="payment-note" style="color:#006341;">
                        <i class="fas fa-university" style="color:#006341;"></i>
                        ¡Transferencias rápidas y seguras con Banpro!
                    </div>
                </div>
                <!-- BANPRO CARD FIN -->
            </div>
            <div style="display:flex;justify-content:center;margin-top:32px;">
                <button id="btn-comprobante" style="background:linear-gradient(90deg,#25d366 0%,#128c7e 100%);color:#fff;font-weight:800;font-size:1.18rem;padding:16px 38px;border:none;border-radius:32px;box-shadow:0 4px 18px rgba(44,62,80,0.13);cursor:pointer;transition:background 0.3s,transform 0.2s;letter-spacing:0.5px;display:flex;align-items:center;gap:12px;">
                    <i class="fas fa-paper-plane"></i> Enviar Comprobante de Pago
                </button>
                <!-- Modal Comprobante de Pago -->
    <div id="modal-comprobante" style="display:none;position:fixed;z-index:99999;top:0;left:0;width:100vw;height:100vh;align-items:center;justify-content:center;">
        <div style="position:absolute;top:0;left:0;width:100vw;height:100vh;background:rgba(44,62,80,0.85);z-index:1;"></div>
        <div style="position:relative;z-index:2;background:linear-gradient(120deg,#eafbe7 60%,#25d366 100%);border-radius:22px;box-shadow:0 8px 40px rgba(44,62,80,0.25);padding:38px 28px 28px 28px;max-width:96vw;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;animation:modal-zoom 0.35s cubic-bezier(.4,2,.3,1);border:2.5px solid #25d366;">
            <button id="cerrar-modal-comprobante" style="position:absolute;top:12px;right:18px;font-size:2rem;color:#e74c3c;background:none;border:none;cursor:pointer;font-weight:900;transition:color 0.2s,transform 0.2s;z-index:3;">&times;</button>
            <div style="font-size:2.2rem;color:#25d366;margin-bottom:10px;"><i class="fas fa-file-invoice-dollar"></i></div>
            <div style="font-weight:800;font-size:1.25rem;margin-bottom:18px;color:#128c7e;text-align:center;">Enviar Comprobante de Pago</div>
            <form id="form-comprobante" style="width:100%;display:flex;flex-direction:column;gap:18px;">
                <div style="display:flex;flex-direction:column;align-items:flex-start;width:100%;">
                    <label for="nombre-comprobante" style="font-weight:700;color:#128c7e;margin-bottom:4px;">Nombre y Apellido</label>
                    <input type="text" id="nombre-comprobante" name="nombre" required style="width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid #cfd8dc;font-size:1.05rem;">
                </div>
                <div style="display:flex;flex-direction:column;align-items:flex-start;width:100%;">
                    <label for="codigo-comprobante" style="font-weight:700;color:#128c7e;margin-bottom:4px;">Comprobante de Pago (número o código)</label>
                    <input type="text" id="codigo-comprobante" name="codigo" required placeholder="Ej: 123456ABC789" style="width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid #cfd8dc;font-size:1.05rem;">
                </div>
                <div style="display:flex;flex-direction:column;align-items:flex-start;width:100%;">
                    <label for="detalle-comprobante" style="font-weight:700;color:#128c7e;margin-bottom:4px;">Detalle o Nota (opcional)</label>
                    <textarea id="detalle-comprobante" name="detalle" style="width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid #cfd8dc;font-size:1.05rem;min-height:60px;"></textarea>
                </div>
                <button type="submit" style="background:linear-gradient(90deg,#25d366 0%,#128c7e 100%);color:#fff;font-weight:800;font-size:1.13rem;padding:13px 0;border:none;border-radius:22px;box-shadow:0 2px 8px rgba(44,62,80,0.10);cursor:pointer;transition:background 0.2s,transform 0.2s;letter-spacing:0.5px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;">
                    <i class="fab fa-whatsapp"></i> Enviar
                </button>
            </form>
            <div id="mensaje-exito-comprobante" style="display:none;margin-top:18px;color:#25d366;font-weight:700;font-size:1.08rem;text-align:center;"><span style="font-size:1.5rem;">✅</span> ¡Comprobante listo para enviar por WhatsApp!</div>
        </div>
        <style>@keyframes modal-zoom{0%{transform:scale(0.92) translateY(40px);opacity:0;}100%{transform:scale(1) translateY(0);opacity:1;}}</style>
    </div>
            </div>
        </div>
    </section>

    <!-- Toast Copiado -->
    <div id="toast-copiado" class="toast-copiado" style="display:none;">
        <span class="toast-icon">✅</span>
        <span class="toast-text">¡copiado al portapapeles!</span>
    </div>

    <!-- Contact -->
    <section id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Contáctame</h2>
            </div>
            
            <div class="contact-container">
                <div class="contact-info">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h3>Dirección</h3>
                            <p>Calle del Cementerio, 100mt sur, Rio San juan. Nicaragua</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h3>Teléfono</h3>
                            <p>+505 5866 8096</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-text">
                            <h3>Correo</h3>
                            <p>franciscoramirezlazo776@gmail.com</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="contact-text">
                            <h3>Horario</h3>
                            <p>Lunes a Sábados: 8:00 AM - 7:00 PM<br>Domingo: Cerrado</p>
                        </div>
                    </div>
                </div>
                
                <div class="contact-form">
                    <form id="whatsappForm">
                        <div class="form-group">
                            <label for="name">Nombre Completo</label>
                            <span class="input-icon"><i class="fas fa-user"></i></span>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Correo Electrónico</label>
                            <span class="input-icon"><i class="fas fa-envelope"></i></span>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Teléfono</label>
                            <span class="input-icon"><i class="fas fa-phone"></i></span>
                            <input type="tel" id="phone" name="phone" required>
                        </div>
                        <div class="form-group">
                            <label for="service">Servicio de Interés</label>
                            <span class="input-icon"><i class="fas fa-briefcase"></i></span>
                            <select id="service" name="service" required>
                                <option value="">Cargando servicios...</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="message">Mensaje</label>
                            <span class="input-icon"><i class="fas fa-comment-dots"></i></span>
                            <textarea id="message" name="message" required></textarea>
                        </div>
                        <button type="submit" class="btn-whatsapp"><i class="fab fa-whatsapp"></i>Enviar WhatsApp</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>Consultor Financiero</h3>
                    <p>Somos una firma de contadores públicos comprometidos con la excelencia y la transparencia en nuestros servicios.</p>
                    <div class="footer-social">
                        <a href="https://wa.me/50558668096?text=%F0%9F%91%8B%20Hola%2C%20me%20gustar%C3%ADa%20recibir%20informaci%C3%B3n%20sobre%20sus%20servicios%20contables%20y%20asesor%C3%ADa.%20%F0%9F%92%B5%20%F0%9F%93%8A%20%F0%9F%91%8D" target="_blank" class="whatsapp-link" title="Contactar por WhatsApp"><i class="fab fa-whatsapp"></i></a>
                        <a href="https://www.facebook.com/francisco.pablo.ramirez.lazo?mibextid=ZbWKwL" target="_blank" class="facebook-link" title="Facebook"><i class="fab fa-facebook"></i></a>
                        <a href="https://www.instagram.com/fran1974ramirez" target="_blank" class="instagram-link" title="Instagram"><i class="fab fa-instagram"></i></a>
                        <a href="https://tiktok.com/@contarsa" target="_blank" class="tiktok-link" title="TikTok"><i class="fab fa-tiktok"></i></a>
                        <a href="https://youtube.com/@franciscopabloramirezlazo4577?si=7sAmYBud-SEOsQ6C" target="_blank" class="youtube-link" title="YouTube"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Servicios</h3>
                    <ul class="footer-links">
                        <li><a href="#">Contabilidad General</a></li>
                        <li><a href="#">Asesoría Fiscal</a></li>
                        <li><a href="#">Auditorías</a></li>
                        <li><a href="#">Consultoría Financiera</a></li>
                        <li><a href="#">Nóminas</a></li>
                        <li><a href="#">Consultoría Empresarial</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Contacto</h3>
                    <p><i class="fas fa-map-marker-alt"></i> Calle del Cementerio, 100mt sur, Rio San juan. Nicaragua</p>
                    <p><i class="fas fa-phone-alt"></i> +505 5866 8096</p>
                    <p><i class="fas fa-envelope"></i> franciscoramirezlazo776@gmail.com</p>
                    <p><i class="fas fa-clock"></i> Horario: Lunes-Sábado: 8AM - 7PM</p>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 Contador Financiero. Todos los derechos reservados.</p>
            <div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;">
                <span class="footer-creator">Creado por: <a href="https://franramirezlazo.com" target="_blank">Francisco Ramirez Lazo</a></span>
                <button type="button" id="installPwaBtn" class="install-btn hidden"><i class="fas fa-download"></i><span>Instalar</span></button>
            </div>
        </div>
    </footer>

    

    <script>
        // Cargar servicios dinámicamente en el formulario de contacto
        function cargarServiciosContacto() {
            const selectService = document.getElementById('service');
            if (!selectService) return;
            
            fetch('servicios.php?action=list')
                .then(res => res.json())
                .then(servicios => {
                    selectService.innerHTML = '<option value="">Seleccione un servicio</option>';
                    
                    if (servicios && servicios.length > 0) {
                        servicios.forEach(servicio => {
                            const option = document.createElement('option');
                            option.value = servicio.nombre;
                            option.textContent = `${servicio.nombre} - $${parseFloat(servicio.precio).toLocaleString('es-ES')}`;
                            selectService.appendChild(option);
                        });
                    } else {
                        // Si no hay servicios, mostrar opciones por defecto
                        const serviciosDefault = [
                            'Contabilidad General',
                            'Asesoría Fiscal', 
                            'Auditorías',
                            'Consultoría Financiera',
                            'Nóminas',
                            'Consultoría Empresarial',
                            'Otro'
                        ];
                        
                        serviciosDefault.forEach(servicio => {
                            const option = document.createElement('option');
                            option.value = servicio;
                            option.textContent = servicio;
                            selectService.appendChild(option);
                        });
                    }
                    
                    // Agregar opción "Otro" al final
                    const optionOtro = document.createElement('option');
                    optionOtro.value = 'Otro';
                    optionOtro.textContent = 'Otro';
                    selectService.appendChild(optionOtro);
                })
                .catch(error => {
                    console.error('Error al cargar servicios:', error);
                    // En caso de error, mostrar opciones por defecto
                    selectService.innerHTML = `
                        <option value="">Seleccione un servicio</option>
                        <option value="Contabilidad General">Contabilidad General</option>
                        <option value="Asesoría Fiscal">Asesoría Fiscal</option>
                        <option value="Auditorías">Auditorías</option>
                        <option value="Consultoría Financiera">Consultoría Financiera</option>
                        <option value="Nóminas">Nóminas</option>
                        <option value="Consultoría Empresarial">Consultoría Empresarial</option>
                        <option value="Otro">Otro</option>
                    `;
                });
        }
        
        // Cargar servicios cuando se carga la página
        document.addEventListener('DOMContentLoaded', function() {
            cargarServiciosContacto();
        });
        
        // Mobile Menu Toggle
        const mobileMenuBtn = document.querySelector('.mobile-menu');
        const nav = document.querySelector('nav');
        
        mobileMenuBtn.addEventListener('click', () => {
            nav.classList.toggle('active');
        });
        
        // Close menu when clicking on a link
        const navLinks = document.querySelectorAll('nav ul li a');
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                nav.classList.remove('active');
            });
        });

        const installBtn = document.getElementById('installPwaBtn');
        if (installBtn) {
            installBtn.addEventListener('click', () => {
                nav.classList.remove('active');
            });
        }
        
        // WhatsApp Form Submission
        const whatsappForm = document.getElementById('whatsappForm');
        
        whatsappForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const phone = document.getElementById('phone').value;
            const service = document.getElementById('service').value;
            const message = document.getElementById('message').value;
            
            const whatsappNumber = '+50558668096';
            const text = `Nuevo mensaje de contacto:%0A%0A*Nombre:* ${name}%0A*Email:* ${email}%0A*Teléfono:* ${phone}%0A*Servicio de interés:* ${service}%0A*Mensaje:* ${message}`;
            
            window.open(`https://wa.me/${whatsappNumber}?text=${text}`, '_blank');
            
            // Reset form
            whatsappForm.reset();
            
            // Mostrar mensaje bonito con emojis
            mostrarMensajeExito();
        });
        
        // PWA Installation & Service Worker
        let deferredPrompt;

        function hideInstallButton() {
            if (installBtn) {
                installBtn.classList.add('hidden');
            }
        }

        function showInstallButton() {
            if (installBtn) {
                installBtn.classList.remove('hidden');
            }
        }

        window.addEventListener('beforeinstallprompt', (event) => {
            event.preventDefault();
            deferredPrompt = event;
            if (!window.matchMedia('(display-mode: standalone)').matches && !window.navigator.standalone) {
                showInstallButton();
            }
        });

        installBtn?.addEventListener('click', async () => {
            if (!deferredPrompt) return;
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            if (outcome === 'accepted') {
                hideInstallButton();
            }
            deferredPrompt = null;
        });

        window.addEventListener('appinstalled', () => {
            hideInstallButton();
            deferredPrompt = null;
        });

        if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone) {
            hideInstallButton();
        }

        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('service-worker.js').catch((error) => {
                    console.error('Service Worker registration failed:', error);
                });
            });
        }

        // Función para mostrar mensaje bonito
        function mostrarMensajeExito() {
            // Si ya existe, no crear otro
            if (document.getElementById('mensaje-exito')) return;
            const mensaje = document.createElement('div');
            mensaje.id = 'mensaje-exito';
            mensaje.innerHTML = `
                <div style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    background: linear-gradient(120deg, #e0ffe7 60%, #eaf6fb 100%);
                    border: 2.5px solid #25d366;
                    box-shadow: 0 8px 32px rgba(37,211,102,0.13);
                    border-radius: 18px;
                    padding: 32px 24px 24px 24px;
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 99999;
                    min-width: 280px;
                    max-width: 90vw;
                    color: #128c7e;
                    font-size: 1.18rem;
                    text-align: center;
                    animation: mensaje-exito-fadein 0.4s;
                ">
                    <div style='font-size:2.8rem; margin-bottom: 10px;'>🎉✅</div>
                    <div style='font-weight:700; font-size:1.25rem; margin-bottom: 8px;'>¡Mensaje enviado con éxito!</div>
                    <div style='margin-bottom: 10px;'>
                        <span style='font-size:1.1rem;'>Gracias por tu mensaje. <br>Serás redirigido a <b>WhatsApp</b> para completar el contacto.<br><span style='font-size:1.5rem;'>💬📲</span></span>
                    </div>
                    <button id="cerrar-mensaje-exito" style="
                        margin-top: 10px;
                        padding: 8px 24px;
                        border-radius: 22px;
                        background: linear-gradient(90deg, #25d366 0%, #128c7e 100%);
                        color: #fff;
                        border: none;
                        font-weight: 700;
                        font-size: 1.05rem;
                        cursor: pointer;
                        box-shadow: 0 2px 8px rgba(44,62,80,0.10);
                        transition: background 0.2s, transform 0.2s;
                    ">Cerrar</button>
                </div>
                <style>
                    @keyframes mensaje-exito-fadein {
                        from { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
                        to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                    }
                </style>
            `;
            document.body.appendChild(mensaje);
            document.getElementById('cerrar-mensaje-exito').onclick = function() {
                mensaje.remove();
            };
            // También cerrar al presionar Escape
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    mensaje.remove();
                    document.removeEventListener('keydown', handler);
                }
            });
        }
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        // Typewriter effect for 'Consultor' y 'Financiero'
        const typewriterText = document.getElementById('typewriter-text');
        const words = ['Consultor Financiero'];
        let wordIndex = 0;
        let i = 0;
        let isDeleting = false;
        let speed = 120;
        function typeEffect() {
            const word = words[wordIndex];
            if (!isDeleting) {
                typewriterText.textContent = word.substring(0, i + 1);
                i++;
                if (i === word.length) {
                    isDeleting = true;
                    setTimeout(typeEffect, 1200); // Pausa al final
                    return;
                }
            } else {
                typewriterText.textContent = word.substring(0, i - 1);
                i--;
                if (i === 0) {
                    isDeleting = false;
                    wordIndex = (wordIndex + 1) % words.length;
                    setTimeout(typeEffect, 600); // Pausa antes de volver a escribir
                    return;
                }
            }
            setTimeout(typeEffect, isDeleting ? 60 : speed);
        }
        typeEffect();
        // Utilidad: igualar alturas de tarjetas para que no haya scroll interno
        function equalizeFlipCards() {
            const cards = document.querySelectorAll('.flip-card');
            cards.forEach(card => {
                const inner = card.querySelector('.flip-card-inner');
                const front = card.querySelector('.flip-card-front');
                const back = card.querySelector('.flip-card-back');
                if (!inner || !front || !back) return;
                // reset
                front.style.height = 'auto';
                back.style.height = 'auto';
                inner.style.height = 'auto';
                card.style.height = 'auto';
                // compute
                const maxH = Math.max(front.scrollHeight, back.scrollHeight);
                front.style.height = maxH + 'px';
                back.style.height = maxH + 'px';
                inner.style.height = maxH + 'px';
                card.style.height = maxH + 'px';
            });
        }
        // Flip Card Servicios Mejorado (listeners básicos)
        document.querySelectorAll('.services-grid .flip-card').forEach(card => {
            const btns = card.querySelectorAll('.flip-btn');
            if (btns[0]) btns[0].addEventListener('click', () => { card.classList.add('flipped'); equalizeFlipCards(); });
            if (btns[1]) btns[1].addEventListener('click', () => { card.classList.remove('flipped'); equalizeFlipCards(); });
        });
        window.addEventListener('resize', () => {
            equalizeFlipCards();
            // Re-inicializar carrusel en cambios de ancho
            clearTimeout(window.__servicesCarouselResizeTO);
            window.__servicesCarouselResizeTO = setTimeout(() => {
                if (typeof initServiciosCarousel === 'function') initServiciosCarousel();
            }, 200);
        });
        // Lightbox para imágenes de socios
        document.querySelectorAll('.lightbox-trigger').forEach(el => {
            el.addEventListener('click', function() {
                const imgSrc = this.getAttribute('data-img');
                const lightbox = document.getElementById('partner-lightbox');
                const lightboxImg = document.getElementById('lightbox-img');
                lightboxImg.src = imgSrc;
                lightbox.classList.add('active');
            });
        });
        document.querySelector('.lightbox-close').addEventListener('click', function() {
            document.getElementById('partner-lightbox').classList.remove('active');
            document.getElementById('lightbox-img').src = '';
        });
        document.querySelector('.lightbox-backdrop').addEventListener('click', function() {
            document.getElementById('partner-lightbox').classList.remove('active');
            document.getElementById('lightbox-img').src = '';
        });
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                document.getElementById('partner-lightbox').classList.remove('active');
                document.getElementById('lightbox-img').src = '';
            }
        });
        // Utilidad: Carrusel móvil auto-deslizante para servicios
        function initServiciosCarousel() {
            const grid = document.getElementById('services-dynamic');
            if (!grid) return;
            // Limpieza previa si existe
            if (grid._carouselCleanup) {
                grid._carouselCleanup();
                grid._carouselCleanup = null;
            }
            // Carrusel deshabilitado por preferencia: mostrar cards completas con espacio.
            // Si en el futuro quieres reactivarlo, descomenta la implementación previa.
            grid._carouselCleanup = () => {};
            return;
        }

        let MONEDA_SIMBOLO = '$';
        let MONEDA_LOCALE = 'es-ES';

        async function cargarAjustesMonedaPublico() {
            try {
                const res = await fetch('ajustes.php?action=get_public');
                const data = await res.json();
                MONEDA_SIMBOLO = data.moneda_simbolo || '$';
                MONEDA_LOCALE = data.locale || 'es-ES';
            } catch (e) {
                MONEDA_SIMBOLO = '$';
                MONEDA_LOCALE = 'es-ES';
            }
        }

        function renderServiciosHome() {
            fetch('servicios.php?action=list')
                .then(res => res.json())
                .then(servicios => {
                    const grid = document.getElementById('services-dynamic');
                    grid.innerHTML = '';
                    if (!servicios.length) {
                        grid.innerHTML = `<div style="text-align:center;color:#aaa;font-size:1.2rem;padding:32px 0;animation:fadeIn 1s;">😮 Próximamente nuevos servicios sorprendentes...</div>`;
                        return;
                    }
                    servicios.forEach((s, idx) => {
                        const card = document.createElement('div');
                        card.className = 'flip-card';
                        card.style.animation = `fadeInUp 0.7s ${idx * 0.12}s both`;
                        card.innerHTML = `
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <div class="service-icon"><i class="fas fa-star"></i></div>
                                    <h3>${s.nombre}</h3>
                                    <div class="service-description-scroll">${s.descripcion}</div>
                                    <button class="flip-btn">Ver precio</button>
                <button class="btn-comprar-servicio" data-id="${s.id}" data-nombre="${s.nombre}" data-precio="${s.precio}" style="margin-top:8px;display:inline-flex;align-items:center;gap:8px;padding:10px 24px;background:linear-gradient(90deg,#e67e22 0%,#f1c40f 100%);color:#fff;font-weight:700;font-size:0.95rem;border:none;border-radius:20px;box-shadow:0 4px 15px rgba(230,126,34,0.3);cursor:pointer;transition:all 0.3s ease;text-decoration:none;"><i class="fas fa-shopping-cart"></i> Comprar</button>
                                </div>
                                <div class="flip-card-back">
                                    <div class="service-price-label">Precio del Servicio</div>
                                    <div class="service-price">${MONEDA_SIMBOLO}${parseFloat(s.precio).toLocaleString(MONEDA_LOCALE || 'es-ES')}</div>
                                    <div style="color:#3498db;font-size:0.98rem;margin-bottom:8px;"><b>Categoría:</b> ${s.categoria}</div>
                                    <button class="flip-btn">Volver</button>
                                </div>
                            </div>
                        `;
                        grid.appendChild(card);
                    });
                    // Animación flip
                    grid.querySelectorAll('.flip-card').forEach(card => {
                        const btns = card.querySelectorAll('.flip-btn');
                        if (btns[0]) btns[0].addEventListener('click', () => { card.classList.add('flipped'); equalizeFlipCards(); });
                        if (btns[1]) btns[1].addEventListener('click', () => { card.classList.remove('flipped'); equalizeFlipCards(); });
                    });
                    
                    // Botón comprar servicio
                    grid.querySelectorAll('.btn-comprar-servicio').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const servicioId = this.getAttribute('data-id');
                            const servicioNombre = this.getAttribute('data-nombre');
                            const servicioPrecio = this.getAttribute('data-precio');
                            mostrarModalCompraServicio(servicioId, servicioNombre, servicioPrecio);
                        });
                    });
                    // Ajustar alturas y activar carrusel móvil después de renderizar
                    requestAnimationFrame(() => {
                        equalizeFlipCards();
                        initServiciosCarousel();
                    });
                });
        }
        // Ajustar alturas al cargar
        window.addEventListener('load', equalizeFlipCards);
        function renderProyectosHome() {
            fetch('proyectos.php?action=list')
                .then(res => res.json())
                .then(proyectos => {
                    const grid = document.getElementById('projects-dynamic');
                    grid.innerHTML = '';
                    if (!proyectos.length) {
                        grid.innerHTML = `<div style="text-align:center;color:#aaa;font-size:1.2rem;padding:32px 0;animation:fadeIn 1s;">🚀 ¡Pronto verás nuestros proyectos más destacados aquí!</div>`;
                        return;
                    }
                    proyectos.forEach((p, idx) => {
                        const card = document.createElement('div');
                        card.className = 'partner-card';
                        card.style.animation = `fadeInUp 0.7s ${idx * 0.13}s both`;
                        card.innerHTML = `
                            <div class="partner-image lightbox-trigger" data-img='${p.imagen ? p.imagen : 'images/empresa1.png'}'>
                                <img src='${p.imagen ? p.imagen : 'images/empresa1.png'}' alt="${p.nombre}">
                            </div>
                            <div class="partner-info">
                                <div style="margin-bottom:8px;"><span style="color:#3498db;font-weight:700;">Nombre:</span> <span style="color:#232946;font-weight:700;">${p.nombre}</span></div>
                                <div style="margin-bottom:8px;"><span style="color:#27ae60;font-weight:700;">Descripción:</span> <span style="color:#232946;">${p.descripcion}</span></div>
                                <div style="margin-bottom:12px;"><span style="color:#e67e22;font-weight:700;">Características:</span> <span style="color:#232946;">${p.caracteristicas}</span></div>
                                <div class="partner-price">${MONEDA_SIMBOLO} <span>${parseFloat(p.precio).toLocaleString(MONEDA_LOCALE || 'es-ES')}</span></div>
                                ${p.link ? `<a href="${p.link}" target="_blank" class="btn-ver-proyecto" style="display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:12px 28px;background:linear-gradient(90deg,#27ae60 0%,#3498db 100%);color:#fff;font-weight:800;border-radius:24px;text-decoration:none;box-shadow:0 4px 18px #27ae6033;transition:background 0.2s,transform 0.2s;font-size:1.08rem;letter-spacing:0.5px;"><i class='fas fa-rocket'></i> Ver Proyecto</a>` : ''}
                                <button class="btn-carrito" data-id="${p.id}" data-nombre="${p.nombre}" style="margin-top:12px;display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:linear-gradient(90deg,#e67e22 0%,#f1c40f 100%);color:#fff;font-weight:800;border-radius:24px;text-decoration:none;box-shadow:0 4px 18px #e67e2233;transition:background 0.2s,transform 0.2s;font-size:1.08rem;letter-spacing:0.5px;"><i class="fas fa-shopping-cart"></i> Comprar</button>
                            </div>
                        `;
                        grid.appendChild(card);
                    });
                    // Lightbox para imágenes
                    grid.querySelectorAll('.lightbox-trigger').forEach(el => {
                        el.addEventListener('click', function() {
                            const imgSrc = this.getAttribute('data-img');
                            const lightbox = document.getElementById('partner-lightbox');
                            const lightboxImg = document.getElementById('lightbox-img');
                            lightboxImg.src = imgSrc;
                            lightbox.classList.add('active');
                        });
                    });
                    // Botón carrito
                    grid.querySelectorAll('.btn-carrito').forEach(btn => {
                        btn.addEventListener('click', function() {
                            mostrarModalCompra(this.getAttribute('data-id'), this.getAttribute('data-nombre'));
                        });
                    });
                });
        }
        // --- CLIENTES SATISFECHOS DINÁMICOS EN HOME ---
        function renderClientesSatisfechos() {
            const grid = document.getElementById('clientes-satisfechos-grid');
            if (!grid) return;
            fetch('clientes.php?action=list')
                .then(res => res.json())
                .then(clientes => {
                    grid.innerHTML = '';
                    if (!Array.isArray(clientes) || !clientes.length) {
                        grid.innerHTML = `<div style="text-align:center;color:#aaa;font-size:1.1rem;padding:24px 0;animation:fadeIn 1s;">Aún no hay clientes registrados.</div>`;
                        return;
                    }
                    clientes.forEach((c, idx) => {
                        const card = document.createElement('div');
                        card.className = 'cliente-card';
                        card.style.background = 'transparent';
                        card.style.border = 'none';
                        card.style.boxShadow = 'none';
                        card.style.padding = '0';
                        card.style.display = 'flex';
                        card.style.alignItems = 'center';
                        card.style.justifyContent = 'center';
                        card.style.animation = `fadeInUp 0.7s ${idx * 0.10}s both`;

                        const nombre = c.nombre || 'Cliente';
                        const inicial = nombre.trim().charAt(0).toUpperCase() || 'C';
                        const fotoHtml = c.foto
                            ? `<img src="${c.foto}" alt="${nombre}" style="width:100%;height:100%;object-fit:cover;">`
                            : `<span style="font-size:2.4rem;font-weight:700;color:#5f6c7b;">${inicial}</span>`;

                        const telefono = c.telefono ? `<div style="font-size:0.95rem;color:#5f6c7b;"><i class="fas fa-phone" style="margin-right:6px;color:#2c3e50;"></i>${c.telefono}</div>` : '';
                        const direccion = c.direccion ? `<div style="font-size:0.95rem;color:#5f6c7b;"><i class="fas fa-map-marker-alt" style="margin-right:6px;color:#e74c3c;"></i>${c.direccion}</div>` : '';

                        card.innerHTML = `
                            <div style="width:110px;height:110px;border-radius:50%;overflow:hidden;border:3px solid #dfe8f1;background:#fff;display:flex;align-items:center;justify-content:center;">
                                ${fotoHtml}
                            </div>
                        `;
                        grid.appendChild(card);
                    });
                })
                .catch(() => {
                    grid.innerHTML = `<div style="text-align:center;color:#aaa;font-size:1.1rem;padding:24px 0;">No se pudieron cargar los clientes.</div>`;
                });
        }
        // Animaciones de aparición
        const styleFade = document.createElement('style');
        styleFade.innerHTML = `
        @keyframes fadeInUp {
            0% { opacity: 0; transform: translateY(40px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        `;
        document.head.appendChild(styleFade);
        async function inicializarContenidoDinamico() {
            await cargarAjustesMonedaPublico();
            renderServiciosHome();
            renderProyectosHome();
            renderClientesSatisfechos();
        }

        inicializarContenidoDinamico();
        // Copiar correo Paypal con toast flotante
        document.getElementById('copy-paypal').addEventListener('click', function(e) {
            e.preventDefault();
            const correo = document.getElementById('correo-paypal').innerText;
            navigator.clipboard.writeText(correo).then(() => {
                const toast = document.getElementById('toast-copiado');
                toast.classList.add('show');
                toast.style.display = 'flex';
                setTimeout(() => {
                    toast.classList.remove('show');
                    toast.style.display = 'none';
                }, 1500);
            });
        });
        // Copiar cuentas Banpro con toast flotante
        document.getElementById('copy-banpro-usd').addEventListener('click', function(e) {
            e.preventDefault();
            const cuenta = document.getElementById('banpro-usd').innerText;
            navigator.clipboard.writeText(cuenta).then(() => {
                const toast = document.getElementById('toast-copiado');
                toast.classList.add('show');
                toast.querySelector('.toast-text').textContent = '¡Cuenta USD copiada!';
                toast.style.display = 'flex';
                setTimeout(() => {
                    toast.classList.remove('show');
                    toast.style.display = 'none';
                    toast.querySelector('.toast-text').textContent = '¡copiado al portapapeles!';
                }, 1500);
            });
        });
        document.getElementById('copy-banpro-nio').addEventListener('click', function(e) {
            e.preventDefault();
            const cuenta = document.getElementById('banpro-nio').innerText;
            navigator.clipboard.writeText(cuenta).then(() => {
                const toast = document.getElementById('toast-copiado');
                toast.classList.add('show');
                toast.querySelector('.toast-text').textContent = '¡Cuenta NIO copiada!';
                toast.style.display = 'flex';
                setTimeout(() => {
                    toast.classList.remove('show');
                    toast.style.display = 'none';
                    toast.querySelector('.toast-text').textContent = '¡copiado al portapapeles!';
                }, 1500);
            });
        });
        // Modal comprobante de pago
        const btnComprobante = document.getElementById('btn-comprobante');
        const modalComprobante = document.getElementById('modal-comprobante');
        const cerrarModalComprobante = document.getElementById('cerrar-modal-comprobante');
        btnComprobante.addEventListener('click',()=>{
            modalComprobante.style.display='flex';
        });
        cerrarModalComprobante.addEventListener('click',()=>{
            modalComprobante.style.display='none';
        });
        modalComprobante.querySelector('div').addEventListener('click',function(e){
            if(e.target===this){modalComprobante.style.display='none';}
        });
        document.addEventListener('keydown',function(e){
            if(e.key==='Escape')modalComprobante.style.display='none';
        });
        // Enviar comprobante por WhatsApp
        document.getElementById('form-comprobante').addEventListener('submit',function(e){
            e.preventDefault();
            const nombre = document.getElementById('nombre-comprobante').value.trim();
            const codigo = document.getElementById('codigo-comprobante').value.trim();
            const detalle = document.getElementById('detalle-comprobante').value.trim();
            let mensaje = `*Comprobante de Pago*%0A%0A*Nombre y Apellido:* ${nombre}%0A*Código de Comprobante:* ${codigo}`;
            if(detalle) mensaje += `%0A*Detalle:* ${detalle}`;
            mensaje += `%0A%0A*Por favor, verifique el comprobante de pago.*`;
            const url = `https://wa.me/50558668096?text=${mensaje}`;
            window.open(url,'_blank');
            document.getElementById('mensaje-exito-comprobante').style.display='block';
            setTimeout(()=>{
                document.getElementById('mensaje-exito-comprobante').style.display='none';
                modalComprobante.style.display='none';
                document.getElementById('form-comprobante').reset();
            },2200);
        });
        // MODAL DE COMPRA
        function mostrarModalCompra(proyectoId, proyectoNombre) {
            let modal = document.getElementById('modal-compra-proyecto');
            if (!modal) {
                modal = document.createElement('div');
                modal.id = 'modal-compra-proyecto';
                modal.style.position = 'fixed';
                modal.style.top = '0';
                modal.style.left = '0';
                modal.style.width = '100vw';
                modal.style.height = '100vh';
                modal.style.background = 'rgba(44,62,80,0.85)';
                modal.style.zIndex = '99999';
                modal.style.display = 'flex';
                modal.style.alignItems = 'center';
                modal.style.justifyContent = 'center';
                modal.innerHTML = `
                    <div style="background:linear-gradient(120deg,#f7fafc 70%,#eaf6fb 100%);border-radius:22px;box-shadow:0 8px 40px rgba(44,62,80,0.25);padding:38px 28px 28px 28px;max-width:96vw;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;animation:modal-zoom 0.35s cubic-bezier(.4,2,.3,1);border:2.5px solid #e67e22;position:relative;">
                        <button id="cerrar-modal-compra-proyecto" style="position:absolute;top:12px;right:18px;font-size:2rem;color:#e74c3c;background:none;border:none;cursor:pointer;font-weight:900;transition:color 0.2s,transform 0.2s;z-index:3;">&times;</button>
                        <div style="font-size:2.2rem;color:#e67e22;margin-bottom:10px;"><i class="fas fa-shopping-cart"></i></div>
                        <div style="font-weight:800;font-size:1.25rem;margin-bottom:18px;color:#e67e22;text-align:center;">Comprar Proyecto: <span style='color:#232946;'>${proyectoNombre}</span></div>
                        <form id="form-compra-proyecto" style="width:100%;display:flex;flex-direction:column;gap:18px;">
                            <div style="display:flex;flex-direction:column;align-items:flex-start;width:100%;">
                                <label for="nombre-compra-proyecto" style="font-weight:700;color:#e67e22;margin-bottom:4px;">Nombre y Apellido</label>
                                <input type="text" id="nombre-compra-proyecto" name="nombre" required style="width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid #cfd8dc;font-size:1.05rem;">
                            </div>
                            <div style="display:flex;flex-direction:column;align-items:flex-start;width:100%;">
                                <label for="telefono-compra-proyecto" style="font-weight:700;color:#e67e22;margin-bottom:4px;">Teléfono</label>
                                <input type="tel" id="telefono-compra-proyecto" name="telefono" required style="width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid #cfd8dc;font-size:1.05rem;">
                            </div>
                            <div style="display:flex;flex-direction:column;align-items:flex-start;width:100%;">
                                <label for="direccion-compra-proyecto" style="font-weight:700;color:#e67e22;margin-bottom:4px;">Dirección</label>
                                <input type="text" id="direccion-compra-proyecto" name="direccion" required style="width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid #cfd8dc;font-size:1.05rem;">
                            </div>
                            <button type="submit" style="background:linear-gradient(90deg,#e67e22 0%,#f1c40f 100%);color:#fff;font-weight:800;font-size:1.13rem;padding:13px 0;border:none;border-radius:22px;box-shadow:0 2px 8px rgba(44,62,80,0.10);cursor:pointer;transition:background 0.2s,transform 0.2s;letter-spacing:0.5px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;">
                                <i class="fas fa-shopping-cart"></i> Confirmar Compra
                            </button>
                        </form>
                        <div id="mensaje-exito-compra-proyecto" style="display:none;margin-top:18px;color:#27ae60;font-weight:700;font-size:1.08rem;text-align:center;"><span style="font-size:1.5rem;">✅</span> ¡Compra registrada exitosamente!</div>
                    </div>
                `;
                document.body.appendChild(modal);
            }
            modal.style.display = 'flex';
            // Cerrar modal
            modal.querySelector('#cerrar-modal-compra-proyecto').onclick = function() {
                modal.style.display = 'none';
            };
            modal.addEventListener('click', function(e){
                if(e.target===modal){modal.style.display='none';}
            });
            document.addEventListener('keydown', function handler(e){
                if(e.key==='Escape'){
                    modal.style.display='none';
                    document.removeEventListener('keydown', handler);
                }
            });
            // Enviar compra
            const form = modal.querySelector('#form-compra-proyecto');
            form.onsubmit = function(e){
                e.preventDefault();
                const nombre = document.getElementById('nombre-compra-proyecto').value.trim();
                const telefono = document.getElementById('telefono-compra-proyecto').value.trim();
                const direccion = document.getElementById('direccion-compra-proyecto').value.trim();
                if(!nombre||!telefono||!direccion)return;
                const fd = new FormData();
                fd.append('nombre',nombre);
                fd.append('telefono',telefono);
                fd.append('direccion',direccion);
                fd.append('proyecto_id',proyectoId);
                fetch('proyectos.php?action=comprar',{
                    method:'POST',
                    body:fd
                })
                .then(res=>res.json())
                .then(data=>{
                    if(data.success){
                        form.style.display='none';
                        modal.querySelector('#mensaje-exito-compra-proyecto').style.display='block';
                        setTimeout(()=>{
                            modal.style.display='none';
                            form.style.display='flex';
                            modal.querySelector('#mensaje-exito-compra-proyecto').style.display='none';
                            form.reset();
                        },1800);
                    }else{
                        alert('Error al registrar la compra: '+(data.error||''));
                    }
                });
            };
        }
        
        // MODAL DE COMPRA DE SERVICIOS
        function mostrarModalCompraServicio(servicioId, servicioNombre, servicioPrecio) {
            let modal = document.getElementById('modal-compra-servicio');
            if (!modal) {
                modal = document.createElement('div');
                modal.id = 'modal-compra-servicio';
                modal.style.position = 'fixed';
                modal.style.top = '0';
                modal.style.left = '0';
                modal.style.width = '100vw';
                modal.style.height = '100vh';
                modal.style.background = 'rgba(44,62,80,0.85)';
                modal.style.zIndex = '99999';
                modal.style.display = 'flex';
                modal.style.alignItems = 'center';
                modal.style.justifyContent = 'center';
                modal.innerHTML = `
                    <div style="background:linear-gradient(120deg,#f7fafc 70%,#eaf6fb 100%);border-radius:22px;box-shadow:0 8px 40px rgba(44,62,80,0.25);padding:38px 28px 28px 28px;max-width:96vw;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;animation:modal-zoom 0.35s cubic-bezier(.4,2,.3,1);border:2.5px solid #3498db;position:relative;">
                        <button id="cerrar-modal-compra-servicio" style="position:absolute;top:12px;right:18px;font-size:2rem;color:#e74c3c;background:none;border:none;cursor:pointer;font-weight:900;transition:color 0.2s,transform 0.2s;z-index:3;">&times;</button>
                        <div style="font-size:2.2rem;color:#3498db;margin-bottom:10px;"><i class="fas fa-briefcase"></i></div>
                        <div style="font-weight:800;font-size:1.25rem;margin-bottom:8px;color:#3498db;text-align:center;">Comprar Servicio: <span style='color:#232946;'>${servicioNombre}</span></div>
                        <div style="font-weight:700;font-size:1.1rem;margin-bottom:18px;color:#e67e22;text-align:center;">Precio: ${MONEDA_SIMBOLO}<span>${parseFloat(servicioPrecio).toLocaleString(MONEDA_LOCALE || 'es-ES')}</span></div>
                        <form id="form-compra-servicio" style="width:100%;display:flex;flex-direction:column;gap:18px;">
                            <div style="display:flex;flex-direction:column;align-items:flex-start;width:100%;">
                                <label for="nombre-compra-servicio" style="font-weight:700;color:#3498db;margin-bottom:4px;">Nombre y Apellido</label>
                                <input type="text" id="nombre-compra-servicio" name="nombre" required style="width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid #cfd8dc;font-size:1.05rem;">
                            </div>
                            <div style="display:flex;flex-direction:column;align-items:flex-start;width:100%;">
                                <label for="telefono-compra-servicio" style="font-weight:700;color:#3498db;margin-bottom:4px;">Teléfono</label>
                                <input type="tel" id="telefono-compra-servicio" name="telefono" required style="width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid #cfd8dc;font-size:1.05rem;">
                            </div>
                            <div style="display:flex;flex-direction:column;align-items:flex-start;width:100%;">
                                <label for="direccion-compra-servicio" style="font-weight:700;color:#3498db;margin-bottom:4px;">Dirección</label>
                                <input type="text" id="direccion-compra-servicio" name="direccion" required style="width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid #cfd8dc;font-size:1.05rem;">
                            </div>
                            <button type="submit" style="background:linear-gradient(90deg,#3498db 0%,#2980b9 100%);color:#fff;font-weight:800;font-size:1.13rem;padding:13px 0;border:none;border-radius:22px;box-shadow:0 2px 8px rgba(44,62,80,0.10);cursor:pointer;transition:background 0.2s,transform 0.2s;letter-spacing:0.5px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:10px;">
                                <i class="fas fa-briefcase"></i> Confirmar Compra
                            </button>
                        </form>
                        <div id="mensaje-exito-compra-servicio" style="display:none;margin-top:18px;color:#27ae60;font-weight:700;font-size:1.08rem;text-align:center;"><span style="font-size:1.5rem;">✅</span> ¡Compra registrada exitosamente!</div>
                    </div>
                `;
                document.body.appendChild(modal);
            }
            modal.style.display = 'flex';
            // Cerrar modal
            modal.querySelector('#cerrar-modal-compra-servicio').onclick = function() {
                modal.style.display = 'none';
            };
            modal.addEventListener('click', function(e){
                if(e.target===modal){modal.style.display='none';}
            });
            document.addEventListener('keydown', function handler(e){
                if(e.key==='Escape'){
                    modal.style.display='none';
                    document.removeEventListener('keydown', handler);
                }
            });
            // Enviar compra
            const form = modal.querySelector('#form-compra-servicio');
            form.onsubmit = function(e){
                e.preventDefault();
                const nombre = document.getElementById('nombre-compra-servicio').value.trim();
                const telefono = document.getElementById('telefono-compra-servicio').value.trim();
                const direccion = document.getElementById('direccion-compra-servicio').value.trim();
                if(!nombre||!telefono||!direccion)return;
                const fd = new FormData();
                fd.append('nombre',nombre);
                fd.append('telefono',telefono);
                fd.append('direccion',direccion);
                fd.append('servicio_id',servicioId);
                fd.append('precio',servicioPrecio);
                fetch('servicios.php?action=comprar',{
                    method:'POST',
                    body:fd
                })
                .then(res=>res.json())
                .then(data=>{
                    if(data.success){
                        form.style.display='none';
                        modal.querySelector('#mensaje-exito-compra-servicio').style.display='block';
                        setTimeout(()=>{
                            modal.style.display='none';
                            form.style.display='flex';
                            modal.querySelector('#mensaje-exito-compra-servicio').style.display='none';
                            form.reset();
                        },1800);
                    }else{
                        alert('Error al registrar la compra: '+(data.error||''));
                    }
                });
            };
        }
    </script>
</body>
</html>
User / IP	: 216.73.216.217
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