.elementor-196 .elementor-element.elementor-element-ed4f29f{--display:flex;}.elementor-196 .elementor-element.elementor-element-ed4f29f.e-con{--flex-grow:0;--flex-shrink:0;}body.elementor-page-196:not(.elementor-motion-effects-element-type-background), body.elementor-page-196 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}@media(min-width:768px){.elementor-196 .elementor-element.elementor-element-ed4f29f{--width:100%;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Work Redes | Agencia de Marketing Digital</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        :root {
            --primary: #ff0000;
            --primary-hover: #cc0000;
            --ai-white: #ffffff; /* Eliminado rastro de azul cian */
            --dark-bg: #030303;
            --card-bg: rgba(20, 20, 20, 0.7);
            --border: rgba(255, 255, 255, 0.1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
        body { font-family: 'Inter', sans-serif; background-color: var(--dark-bg); color: white; line-height: 1.7; overflow-x: hidden; }

        /* Fondo de Partículas */
        #particles-js { position: fixed; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; }

        /* Navegación Alineada a la Izquierda */
        nav { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: 10px 8%; 
            background: rgba(0,0,0,0.85); 
            backdrop-filter: blur(15px); 
            position: fixed; 
            width: 100%; 
            z-index: 1000; 
            border-bottom: 1px solid var(--border); 
        }
        
        /* Contenedor del Logo */
        .logo-container {
            display: flex;
            align-items: center;
            margin-right: auto; /* Empuja el botón al extremo derecho */
        }

        /* Hero Section */
        header { 
            height: 100vh; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            text-align: center; 
            padding: 0 5%; 
            background: radial-gradient(circle at center, #110000 0%, transparent 100%); 
        }

        /* Badge ahora en blanco */
        .ai-badge { 
            background: rgba(255, 255, 255, 0.05); 
            color: var(--ai-white); 
            padding: 5px 15px; 
            border-radius: 20px; 
            font-size: 0.7rem; 
            font-weight: bold; 
            letter-spacing: 2px; 
            margin-bottom: 20px; 
            border: 1px solid rgba(255, 255, 255, 0.3); 
        }

        h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 900; line-height: 1; margin-bottom: 20px; }
        .highlight { background: linear-gradient(90deg, #ff0000, #ff6666); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        header p { max-width: 750px; color: #aaa; font-size: 1.2rem; margin-bottom: 40px; }

        /* Secciones y Cards */
        section { padding: 120px 10%; position: relative; }
        .sub { color: var(--primary); font-weight: bold; text-transform: uppercase; letter-spacing: 3px; font-size: 0.8rem; display: block; margin-bottom: 15px; }
        h2 { font-size: 3rem; font-weight: 900; margin-bottom: 50px; line-height: 1.1; }

        .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
        .info-card { background: var(--card-bg); padding: 45px; border-radius: 30px; border: 1px solid var(--border); backdrop-filter: blur(10px); transition: 0.4s; }
        .info-card:hover { border-color: var(--primary); transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
        .info-card h3 { font-size: 1.8rem; margin-bottom: 25px; color: white; border-left: 4px solid var(--primary); padding-left: 15px; }
        .info-card ul { list-style: none; }
        .info-card ul li { margin-bottom: 15px; color: #ccc; display: flex; align-items: flex-start; }
        .info-card ul li::before { content: '⚡'; margin-right: 10px; color: var(--primary); font-size: 0.8rem; }

        /* Botones */
        .btn { padding: 18px 45px; border-radius: 50px; font-weight: bold; text-decoration: none; display: inline-block; transition: 0.3s; cursor: pointer; border: none; }
        .btn-primary { background: var(--primary); color: white; box-shadow: 0 10px 20px rgba(255,0,0,0.2); }
        .btn-primary:hover { background: var(--primary-hover); transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); }

        /* Footer */
        footer { background: #000; padding: 100px 10% 40px; border-top: 1px solid var(--border); }
        .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 50px; margin-bottom: 60px; }
        .footer-col { text-align: left; }
        .footer-col h4 { color: white; margin-bottom: 25px; font-size: 1.2rem; }
        .footer-col p, .footer-col li { color: #666; font-size: 0.9rem; list-style: none; margin-bottom: 10px; }
        .footer-bottom { border-top: 1px solid #111; padding-top: 30px; text-align: center; color: #444; font-size: 0.8rem; }

        .plan-featured { border: 2px solid var(--primary) !important; background: linear-gradient(180deg, rgba(255,0,0,0.05) 0%, transparent 100%); }

        @media (max-width: 768px) { 
            section { padding: 80px 5%; } 
            h2 { font-size: 2.2rem; }
            nav { padding: 10px 5%; }
        }
    </style>
</head>
<body>

    <div id="particles-js"></div>

    <nav>/* End custom CSS */