<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FON - Puentes de Fibra Óptica para un Futuro Conectado</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Montserrat:wght@300;400;500;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --verde-electrico: #01fdb8;
            --verde-profundo: #001822;
            --blanco: #ffffff;
            --gris-claro: #f5f5f5;
            --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        body {
            font-family: 'Montserrat', sans-serif;
            line-height: 1.6;
            color: var(--verde-profundo);
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Sora', sans-serif;
            font-weight: 700;
        }
        
        /* Animación de fibra óptica */
        @keyframes pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }
        
        @keyframes flow {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        /* Header */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(0, 24, 34, 0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 1rem 0;
            box-shadow: 0 2px 20px rgba(1, 253, 184, 0.1);
            transition: var(--transicion);
        }
        
        nav {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            transition: var(--transicion);
        }
        
        .logo:hover {
            transform: scale(1.05);
        }
        
        .logo-img {
            height: 100px;
            width: auto;
            max-width: 200px;
            object-fit: contain;
        }
        
        .nav-menu {
            display: flex;
            gap: 2rem;
            list-style: none;
        }
        
        .nav-link {
            color: var(--blanco);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transicion);
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--verde-electrico);
            transition: var(--transicion);
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .cta-button {
            background: var(--verde-electrico);
            color: var(--verde-profundo);
            padding: 0.8rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: var(--transicion);
            box-shadow: 0 4px 15px rgba(1, 253, 184, 0.3);
        }
        
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(1, 253, 184, 0.5);
        }
        
        /* Hero Section */
        .hero {
            padding: 120px 2rem 60px;
            min-height: 100vh;
            background: linear-gradient(135deg, var(--verde-profundo) 0%, #002633 100%);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(1, 253, 184, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(1, 253, 184, 0.05) 0%, transparent 50%);
        }
        
        .fiber-animation {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.1;
        }
        
        .fiber-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--verde-electrico), transparent);
            animation: flow 5s linear infinite;
        }
        
        .fiber-line:nth-child(1) { top: 20%; width: 60%; animation-delay: 0s; }
        .fiber-line:nth-child(2) { top: 40%; width: 80%; animation-delay: 1s; }
        .fiber-line:nth-child(3) { top: 60%; width: 70%; animation-delay: 2s; }
        .fiber-line:nth-child(4) { top: 80%; width: 90%; animation-delay: 3s; }
        
        .hero-content {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }
        
        .hero-text h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            color: var(--blanco);
            margin-bottom: 1.5rem;
            line-height: 1.1;
        }
        
        .hero-text h1 span {
            color: var(--verde-electrico);
            display: inline-block;
            animation: pulse 2s ease-in-out infinite;
        }
        
        .hero-text p {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2rem;
            line-height: 1.8;
        }
        
        .hero-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .hero-visual {
            position: relative;
            height: 500px;
        }
        
        .globe-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .globe {
            width: 400px;
            height: 400px;
            border: 3px solid var(--verde-electrico);
            border-radius: 50%;
            position: relative;
            animation: rotate 20s linear infinite;
            box-shadow: 0 0 100px rgba(1, 253, 184, 0.3);
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .globe::before,
        .globe::after {
            content: '';
            position: absolute;
            border: 2px solid rgba(1, 253, 184, 0.3);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .globe::before {
            width: 100%;
            height: 60%;
        }
        
        .globe::after {
            width: 60%;
            height: 100%;
        }
        
        /* Secciones */
        section {
            padding: 80px 2rem;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .section-title h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            color: var(--verde-profundo);
            margin-bottom: 1rem;
            position: relative;
            display: inline-block;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: var(--verde-electrico);
        }
        
        /* Servicios */
        .services {
            background: var(--gris-claro);
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .service-card {
            background: var(--blanco);
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
            transition: var(--transicion);
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 24, 34, 0.1);
        }
        
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--verde-electrico), var(--verde-profundo));
            transform: scaleX(0);
            transition: var(--transicion);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 40px rgba(0, 24, 34, 0.2);
        }
        
        .service-card:hover::before {
            transform: scaleX(1);
        }
        
        .service-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            background: linear-gradient(135deg, var(--verde-electrico), #00d4a4);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: var(--blanco);
        }
        
        .service-card h3 {
            color: var(--verde-profundo);
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }
        
        /* About */
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }
        
        .about-text {
            font-size: 1.1rem;
            line-height: 1.8;
        }
        
        .about-features {
            display: grid;
            gap: 1.5rem;
            margin-top: 2rem;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .feature-icon {
            width: 40px;
            height: 40px;
            background: var(--verde-electrico);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* History */
        .history {
            background: var(--gris-claro);
        }

        .history-intro {
            text-align: center;
            max-width: 900px;
            margin: 0 auto 3rem;
            font-size: 1.1rem;
            line-height: 1.9;
        }

        .history-intro em {
            color: var(--verde-profundo);
            font-style: italic;
            font-weight: 500;
        }

        .companies-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        .company-card {
            background: var(--blanco);
            padding: 2.5rem;
            border-radius: 20px;
            box-shadow: 0 5px 20px rgba(0, 24, 34, 0.1);
            transition: var(--transicion);
            border-left: 4px solid var(--verde-electrico);
        }

        .company-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 40px rgba(0, 24, 34, 0.15);
        }

        .company-card h3 {
            color: var(--verde-profundo);
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .company-card p {
            line-height: 1.8;
        }

        .history-highlight {
            background: linear-gradient(135deg, var(--verde-profundo) 0%, #002633 100%);
            color: var(--blanco);
            padding: 3rem;
            border-radius: 20px;
            margin-top: 3rem;
        }

        .history-highlight h3 {
            color: var(--verde-electrico);
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
        }

        .history-highlight p {
            line-height: 1.9;
            opacity: 0.95;
        }

        /* Contact */
        .contact {
            background: linear-gradient(135deg, var(--verde-profundo) 0%, #002633 100%);
            color: var(--blanco);
        }
        
        .contact .section-title h2 {
            color: var(--blanco);
        }
        
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            margin-top: 3rem;
        }
        
        .contact-info {
            display: grid;
            gap: 2rem;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .contact-form {
            display: grid;
            gap: 1.5rem;
        }
        
        .form-group {
            display: grid;
            gap: 0.5rem;
        }
        
        .form-group label {
            font-weight: 500;
        }
        
        .form-group input,
        .form-group textarea {
            padding: 1rem;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: var(--blanco);
            font-family: 'Montserrat', sans-serif;
            transition: var(--transicion);
        }
        
        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 0 2px var(--verde-electrico);
        }
        
        .submit-button {
            background: var(--verde-electrico);
            color: var(--verde-profundo);
            padding: 1rem 2rem;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transicion);
            font-family: 'Montserrat', sans-serif;
        }
        
        .submit-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(1, 253, 184, 0.5);
        }
        
        /* Footer */
        footer {
            background: var(--verde-profundo);
            color: var(--blanco);
            padding: 2rem;
            text-align: center;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* Responsive */
        .menu-toggle {
            display: none;
            flex-direction: column;
            gap: 4px;
            cursor: pointer;
        }
        
        .menu-toggle span {
            width: 25px;
            height: 3px;
            background: var(--verde-electrico);
            transition: var(--transicion);
        }
        
        @media (max-width: 768px) {
            .logo-img {
                height: 50px;
                max-width: 180px;
            }
            
            .menu-toggle {
                display: flex;
            }
            
            .nav-menu {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background: var(--verde-profundo);
                flex-direction: column;
                padding: 2rem;
                transition: var(--transicion);
            }
            
            .nav-menu.active {
                left: 0;
            }
            
            .hero-content,
            .about-content,
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .hero-visual {
                height: 300px;
            }
            
            .globe {
                width: 250px;
                height: 250px;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <a href="#" class="logo">
                <img src="logo-fon.png" alt="FON - Puentes de Fibra Óptica para un Futuro Conectado" class="logo-img">
            </a>
            <ul class="nav-menu">
                <li><a href="#inicio" class="nav-link">Inicio</a></li>
                <li><a href="#servicios" class="nav-link">Servicios</a></li>
                <li><a href="#nosotros" class="nav-link">Nosotros</a></li>
                <li><a href="#historia" class="nav-link">Historia</a></li>
                <li><a href="#contacto" class="nav-link">Contacto</a></li>
            </ul>
            <div class="menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>
    
    <section id="inicio" class="hero">
        <div class="fiber-animation">
            <div class="fiber-line"></div>
            <div class="fiber-line"></div>
            <div class="fiber-line"></div>
            <div class="fiber-line"></div>
        </div>
        <div class="hero-content">
            <div class="hero-text">
                <h1>Puentes de <span>Fibra Óptica</span> para un Futuro Conectado</h1>
                <p>Transformamos la conectividad empresarial con soluciones de fibra óptica de alta velocidad, diseñadas para impulsar tu negocio hacia la era digital.</p>
                <div class="hero-buttons">
                    <a href="#servicios" class="cta-button">Conocer Servicios</a>
                    <a href="#contacto" class="cta-button" style="background: transparent; border: 2px solid var(--verde-electrico); color: var(--verde-electrico);">Contactar Ahora</a>
                </div>
            </div>
            <div class="hero-visual">
                <div class="globe-container">
                    <div class="globe"></div>
                </div>
            </div>
        </div>
    </section>
    
    <section id="servicios" class="services">
        <div class="container">
            <div class="section-title">
                <h2>Nuestros Servicios</h2>
                <p>Soluciones integrales de conectividad para empresas que buscan velocidad, estabilidad y confiabilidad</p>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">⚡</div>
                    <h3>Internet Dedicado</h3>
                    <p>Conexión simétrica de alta velocidad con ancho de banda garantizado y SLA del 99.9% de disponibilidad.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🔒</div>
                    <h3>Enlaces Punto a Punto</h3>
                    <p>Conecta múltiples sedes con enlaces privados seguros y de baja latencia para operaciones críticas.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">☁️</div>
                    <h3>Conectividad Cloud</h3>
                    <p>Acceso directo y seguro a los principales proveedores de servicios en la nube con rutas optimizadas.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">🛡️</div>
                    <h3>Backup & Redundancia</h3>
                    <p>Soluciones de respaldo automático para garantizar continuidad operativa 24/7.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">📞</div>
                    <h3>VoIP Empresarial</h3>
                    <p>Telefonía IP de última generación con calidad HD y funcionalidades avanzadas.</p>
                </div>
                <div class="service-card">
                    <div class="service-icon">⚙️</div>
                    <h3>Gestión Integral</h3>
                    <p>Monitoreo proactivo y soporte técnico especializado las 24 horas.</p>
                </div>
            </div>
        </div>
    </section>
    
    <section id="nosotros" class="about">
        <div class="container">
            <div class="section-title">
                <h2>Sobre FON</h2>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <p>En FON, somos más que un proveedor de telecomunicaciones. Somos el puente tecnológico que conecta tu empresa con el futuro digital. Con infraestructura de fibra óptica de última generación, brindamos soluciones que transforman la manera en que las empresas se comunican y operan.</p>
                    <div class="about-features">
                        <div class="feature-item">
                            <div class="feature-icon">✓</div>
                            <span>Red 100% fibra óptica de alta capacidad</span>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">✓</div>
                            <span>Cobertura nacional con presencia internacional</span>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">✓</div>
                            <span>Soporte técnico especializado 24/7/365</span>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">✓</div>
                            <span>Soluciones escalables y personalizadas</span>
                        </div>
                    </div>
                </div>
                <div class="about-stats">
                    <div style="display: grid; gap: 2rem;">
                        <div style="text-align: center; padding: 2rem; background: linear-gradient(135deg, rgba(1, 253, 184, 0.1), transparent); border-radius: 20px;">
                            <h3 style="font-size: 3rem; color: var(--verde-electrico);">99.9%</h3>
                            <p>Disponibilidad de Red</p>
                        </div>
                        <div style="text-align: center; padding: 2rem; background: linear-gradient(135deg, rgba(1, 253, 184, 0.1), transparent); border-radius: 20px;">
                            <h3 style="font-size: 3rem; color: var(--verde-electrico);">10Gbps</h3>
                            <p>Capacidad Máxima</p>
                        </div>
                        <div style="text-align: center; padding: 2rem; background: linear-gradient(135deg, rgba(1, 253, 184, 0.1), transparent); border-radius: 20px;">
                            <h3 style="font-size: 3rem; color: var(--verde-electrico);">24/7</h3>
                            <p>Soporte Técnico</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="historia" class="history">
        <div class="container">
            <div class="section-title">
                <h2>Nuestra Historia</h2>
            </div>
            <div class="history-intro">
                <p>FON nace a fines de 2024 como resultado de la fusión estratégica entre <strong>Siete Capas SRL</strong> y <strong>Premier</strong>, dos empresas con una amplia trayectoria y fuerte presencia en el mercado de telecomunicaciones y servicios tecnológicos en la región.</p>
                <p style="margin-top: 1.5rem;">La unión surge con un objetivo claro: llevar adelante uno de los proyectos de conectividad más ambiciosos de la Patagonia, la traza de fibra óptica entre <strong>Rincón de los Sauces y Añelo</strong>, un corredor clave para la industria energética y para el desarrollo de la región de Vaca Muerta. Se trata de una obra que atraviesa una <em>zona compleja, inhóspita y de condiciones climáticas extremas</em>, donde la experiencia, la planificación y la capacidad de ejecución son fundamentales para garantizar resultados exitosos.</p>
            </div>

            <div class="companies-grid">
                <div class="company-card">
                    <h3>Siete Capas SRL</h3>
                    <p>Siete Capas se consolidó como una empresa regional especializada en servicios de internet, infraestructura tecnológica y proyectos de fibra óptica. Su impronta innovadora y su enfoque en la calidad de servicio le permitieron convertirse en un socio estratégico para empresas, pymes y familias en Neuquén, destacándose por proyectos de gran escala vinculados al sector petrolero y energético.</p>
                </div>
                <div class="company-card">
                    <h3>Premier</h3>
                    <p>Premier, por su parte, aportó su trayectoria en gestión de obras y soluciones tecnológicas a medida, con una fuerte inserción en el mercado corporativo. Reconocida por su capacidad de planificación, ejecución y respaldo técnico, Premier se transformó en un aliado clave para empresas que requieren soporte confiable y proyectos de gran complejidad.</p>
                </div>
            </div>

            <div class="history-highlight">
                <h3>El nacimiento de FON</h3>
                <p>La creación de FON refleja la visión compartida de ambas compañías: conectar el futuro de la región con infraestructura. La combinación de la experiencia técnica de Siete Capas y la capacidad de gestión y respaldo de Premier permitió dar forma a una empresa sólida, preparada para afrontar los desafíos de expansión y para convertirse en un actor central en la transformación digital y de conectividad en Vaca Muerta.</p>
                <p style="margin-top: 1.5rem;">Hoy, FON no solo representa un proyecto de integración empresarial, sino también un compromiso con el desarrollo económico y social de Neuquén, potenciando la conectividad, la innovación y la competitividad en una de las zonas más estratégicas del país.</p>
            </div>
        </div>
    </section>

    <section id="contacto" class="contact">
        <div class="container">
            <div class="section-title">
                <h2>Conectemos tu Empresa</h2>
                <p>Descubre cómo FON puede transformar la conectividad de tu negocio</p>
            </div>
            <div class="contact-grid">
                <div class="contact-info">
                    <div class="contact-item">
                        <div class="feature-icon">📧</div>
                        <div>
                            <h4>Email Corporativo</h4>
                            <p>info@fon.ar</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="feature-icon">📞</div>
                        <div>
                            <h4>Línea Empresarial</h4>
                            <p>299-4090020</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="feature-icon">📍</div>
                        <div>
                            <h4>Oficina Central</h4>
                            <p>Neuquén, Argentina</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="feature-icon">⏰</div>
                        <div>
                            <h4>Atención</h4>
                            <p>Lun-Vie: 8:00 - 18:00</p>
                            <p>Soporte: 24/7</p>
                        </div>
                    </div>
                </div>
                <form class="contact-form">
                    <div class="form-group">
                        <label>Empresa</label>
                        <input type="text" placeholder="Nombre de su empresa" required>
                    </div>
                    <div class="form-group">
                        <label>Email Corporativo</label>
                        <input type="email" placeholder="contacto@empresa.com" required>
                    </div>
                    <div class="form-group">
                        <label>Servicio de Interés</label>
                        <input type="text" placeholder="¿Qué servicio necesita?" required>
                    </div>
                    <div class="form-group">
                        <label>Mensaje</label>
                        <textarea rows="4" placeholder="Cuéntenos sobre sus necesidades de conectividad"></textarea>
                    </div>
                    <button type="submit" class="submit-button">Solicitar Información</button>
                </form>
            </div>
        </div>
    </section>
    
    <footer>
        <div class="footer-content">
            <p>&copy; 2025 FON - Puentes de Fibra Óptica para un Futuro Conectado. Todos los derechos reservados.</p>
        </div>
    </footer>
    
    <script>
        // Menu mobile toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const navMenu = document.querySelector('.nav-menu');
        
        menuToggle?.addEventListener('click', () => {
            navMenu.classList.toggle('active');
        });
        
        // Smooth scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    navMenu.classList.remove('active');
                }
            });
        });
        
        // Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 100) {
                header.style.padding = '0.5rem 0';
                header.style.background = 'rgba(0, 24, 34, 0.98)';
            } else {
                header.style.padding = '1rem 0';
                header.style.background = 'rgba(0, 24, 34, 0.95)';
            }
        });
        
        // Form submission
        document.querySelector('.contact-form')?.addEventListener('submit', (e) => {
            e.preventDefault();
            alert('Gracias por su interés. Nos pondremos en contacto pronto.');
        });
        
        // Animation on scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);
        
        document.querySelectorAll('.service-card, .feature-item').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(20px)';
            el.style.transition = 'all 0.6s ease';
            observer.observe(el);
        });
    </script>
    <!-- Widget de Chatwoot con colores personalizados de FON -->
    <script>
      (function(d,t) {
        var BASE_URL="https://waba.sietecapas.com.ar";
        var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=BASE_URL+"/packs/js/sdk.js";
        g.async = true;
        s.parentNode.insertBefore(g,s);
        g.onload=function(){
          window.chatwootSDK.run({
            websiteToken: 'Ww3ZFQ9GLkH3vUewefqiz2Ha',
            baseUrl: BASE_URL
          });
          
          // Personalización adicional de colores después de cargar
          setTimeout(function() {
            window.chatwootSettings = {
              hideMessageBubble: false,
              position: 'right',
              locale: 'es',
              type: 'standard',
              launcherTitle: 'FON - Soporte'
            };
            
            // Intentar aplicar estilos directamente al elemento una vez cargado
            var checkExist = setInterval(function() {
              var bubble = document.querySelector('.woot-widget-bubble');
              if (bubble) {
                bubble.style.setProperty('background', '#01fdb8', 'important');
                bubble.style.setProperty('background-color', '#01fdb8', 'important');
                clearInterval(checkExist);
              }
            }, 100);
            
            // Aplicar tema personalizado si el SDK lo permite
            if (window.$chatwoot) {
              window.$chatwoot.setCustomAttributes({
                theme_color: '#01fdb8'
              });
            }
          }, 1000);
        }
      })(document,"script");
    </script>
</body>
</html>
